自动联想的下拉文本选项

文本框内具有联想的下拉菜单

今天用的是selectize.js插件

<script>
    $(function () {
        $("#DicOrg").selectize();
        var $select = $("#selDept").selectize({
            valueField: 'id',
            labelField: 'title',
            searchField: 'title'
        });
        var control = $select[0].selectize;
       
        $("#DicOrg").change(function () {
            var param = { orgid: $(this).find("option:selected").val() };
            $.getJSON("/Home/GetDept", param, function (data) {
                //var str = "<option value=''>请选择</option>";
                //for (var i = 0; i < data.length; i++) {
                //    str += "<option value='" + data[i].dept_id + "'>" + data[i].dept_name + "</option>";
                //}
                //$("#selDept").html(str);
                debugger;
                control.clearOptions();
                control.addOption(data);              
            });
           
        })
    })
</script>

clearOptions()：清除select下的option，清除之后就没有任何option可选了

addOption()：添加option

addItem(2)：选择value=’2’的option

 success: function(res) {  // res是list集合中存放map，map key：cityId，map value：cityName  // 重新生成option之前先清除前面生成的option  

        control.clearOptions();  for(var i = 0; i < res.length; i++){  

            control.addOption({  

               id : res[i]["cityId"],  

             title : res[i]["cityName"],  

           });  

        }  

   },  

这两种添加option的方式都是一样的

代码段中里的data返回的就是一个json串 里面包含着id 和 title

  public ActionResult GetDept(string orgid)
        {
            List<hos_dic_dept> lstDept = dicDal.GetDept(x => x.org_id == orgid.Trim(), 0);
            var result = from x in lstDept select new { id = x.dept_id, title = x.dept_name };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

然后前台的效果就可以出来了