关于jquery.chosen,js下拉框插件动态添加option
2018-02-06 15:45
1606 查看
function getCityData(city, scProvinceId) { var obj = document.getElementById("scCity"); if (scProvinceId != '') { $.ajax({ url: "<%=basePath%>driverSchool/getCitiesByProvince", type: 'post', data: { "provinceId": scProvinceId }, async: true, success: function (data) { if (data.length > 0) { $.each(data, function (index, e) { if (city == e.city) { obj.add(new Option(e.city, e.city, true, true)); } else { obj.add(new Option(e.city, e.city)); } }); $("#scCity").trigger("chosen:updated"); $("#scCity").chosen(); } } }); } }
<select class="chzn-select" name="scCity" id="scCity" data-placeholder="请选择城市" style="vertical-align:top;width: 75%"> <option label='请选择城市'></option> </select>
功能:通过省份Id获取该省份的市区信息,并动态生成市区下拉框。
其中:
obj.add(new Option(e.city, e.city, true, true));
第一个true,表示选中(selected),第二个true,表示有效。如果你只写了第一个true,该option不会有反应的。
$("#scCity").trigger("chosen:updated");
$("#scCity").chosen();
这两句很重要,如果你不加,option根本就添不进去。在我之前写联动时,用的是
$("#scCity").trigger("liszt:updated");
$("#scCity").chosen();
但是不知为什么就是没有反应,后来查资料,才发现后面的写法是旧版的,改成上面的写法就好了。
现在我们再说说scCity下拉框的模糊查询。chosen默认从第一个字符搜索,你直接输入中间的字符,是搜索不到的。
$(".chzn-select").chosen({
search_contains: true
});加入该句后,
相关文章推荐
- jquery及js动态添加删除option示例
- chosen.jquery 插件 动态设置下拉选项被选中selected
- js与jquery动态添加option
- 关于js遍历list集合,获取select选中的值以及动态添加option
- JS & JQuery 动态添加 option
- 【jquery】Chosen.jquery.js 插件动态加载数据问题
- 关于js动态向下拉列表中添加数据
- 使用JS,如何给下拉列表动态的添加一个option 选项?
- 在使用jquery的chosen下拉列表的插件时,碰到了使用jquery.validate.js的冲突
- 利用js给datalist或select动态添加option选项的方法
- asp.net利用json填充下拉框及js动态添加表格行、删除表格行的示例
- 第一章:关于jquery添加百度地图插件(通过本地ip地址定位)
- js、jQuery 关于下拉框 取值操作
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- js对select动态添加和删除OPTION
- jquery.select.js (下拉框插件)不支持IE6 的 方法 (小心用JQuery 插件)
- js对select动态添加和删除OPTION
- javascript(js)动态添加日期时间下拉框菜单
- javascript(js)动态添加省、市、区下拉框菜单
- js、jquery、动态添加option项