继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

php与前端(三):下拉框搜索 select2 的使用

有肌肉的coder
关注TA
已关注
手记 8
粉丝 12
获赞 161

使用场景是:一个下拉框有太多值 需要搜索做匹配
这里写图片描述

一:加载文件

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

二:html代码

<select name="hospital_id" id="searchHospital">
    <option value="0">请选择医院</option>
    <foreach name="hospitalData" item="list">
        <option value="{$list.hospital_id}" 
            <if condition="$_GET['hospital_id'] eq $list['hospital_id']">selected</if>>
        {$list.hospital_name}
        </option>
    </foreach>
</select>

三:js

<script>
    $(function(){
        $('#searchHospital').select2({
            placeholder: "Select a state"
        });
    });
</script>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP