bootstarp可搜索下拉框样例

<head>

<link rel="stylesheet" type="text/css" href="<%=basePath%>../../css/bootstrap-editable.css" />
        <link rel="stylesheet" type="text/css" href="<%=basePath%>../../bootstrap-select2/select2.css" />

</head>

<body>

<div class="form-group col-sm-6 col-xs-12">
                    <label for="deptCode">护士站:</label>
                    <select class="form-control" id="deptCode" onChange="deptCodeChange()" name="serviceWheelchair.deptCode" value="${serviceWheelchair.deptCode}">
                    </select>
                </div>

</body>

<script src="<%=basePath%>../../bootstrap-select2/bootstrap-select2.js" type="text/javascript" charset="utf-8"></script>
        <script src="<%=basePath%>../../bootstrap-select2/select2-zh-CN.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$("#deptCode").html("").select2({
                maximumSelectionLength: 50,
                language: "zh-CN",
                placeholder: "请输入护士站名称...",
                ajax: {
                    url: "<%=basePath%>sys/wheelchair/queryAllDeptMH.action",//分页q参数模糊查
                    type: "POST",

         /* success:function(result){
                 $("#monitorCode").on(  
                       "change",  
                       function(a, b, c) {  
                           $("#monitorName").val(  
                                   $("#monitorCode option:selected").text());
                       }
                )
            }, */
                    processResults: function(data) {
                        var resData = []
                        for(var i = 0; i < data.rows.length; i++) {
                            resData.push({
                                id: data.rows[i]["deptCode"],
                                text: data.rows[i]["deptName"]
                            })
                        }
                        return {
                            results: resData
                        };
                    },
                    data: function(params) {
                        var query = {
                            q: params.term
                        }
                        return query;
                    }
                }
            })
            var pid = '${serviceWheelchair.deptCode}';
            $.ajax({
                url: "<%=basePath%>sys/wheelchair/queryAllDept.action",//不分页查询全部
                type: "post",
                success: function(data) {
                    for(var i = 0; i < data.length; i++) {
                        if(data[i].deptCode == pid) {
                            var id = data[i].deptCode;
                            var name = data[i].deptName;
                            $("#deptCode").html("<option value=" + id + ">" + name + "</option>").val(id).trigger('change')
                            break;
                        }
                    }
                }
            });
        })

</script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值