bootstrap 中的chosen-select怎么动态添加和删除option

Posted 2023-03-23

<select id="ddlResourceType" onchange="getvalue(this)">
</select>
动态删除select中的所有options：
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option：
document.getElementById("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
上面在IE和FireFox都能测试成功，希望以后你可以用上。
其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。
取值方面
function getvalue(obj)

var m=obj.options[obj.selectedIndex].value
alert(m);//获取value
var n=obj.options[obj.selectedIndex].text
alert(n);//获取文本
追问

试过了，这种方法对select控件有效，但是对chosen-select控件无效，就是如图这种：

参考技术A chosen是根据原select生产一个ul，然后将原select标签隐藏。所以直接改select是无效的，需要在你修改select后，重新调用$(select).chosen()就行了。

解决chosen-select动态加载数据不生效的问题

// chosen-select设置select下拉列表的样式并重新加载
function setSelectStyle(selectId){
    // 初始化chosen-select样式
    selectId.chosen({no_results_text: "没有搜索到信息"});
    // 因为chosen-select中的option是动态加载的,因此在加载完毕样式之后需要重新刷新一下
    selectId.trigger("chosen:updated");
}

chosen-select的使用可以参考:select下拉选择框美化插件及问题