jquery 动态添加select 如何避免重复添加（去重）

1、确定当前需要添加元素的text以及对应的value

2、获取当前下拉框中所有的option元素数组optionArr，可以通过$('#citySelect option')获取元素集合。

3、遍历optionArr，判断需要添加的text或者value是否和optionArr相同，相同则不添加，没有重复则添加。

示例：

<select id='citySelect'>

<option value='beijing'>北京</option>

<option value='shanghai'>上海</option>

</select>

方法：

<script>

function addCity(value, text){

var optionArr = $('#citySelect option')

for(var i=0i<optionArr.lengthi++){

if(optionArr[i].text == text || optionArr[i].value == value){

return false

}

}

var addOption = "<option value='" + value + "'>" + text + "</option>"

$('#citySelect').append(addOption)

}

</script>

jquery文档 *** 作的append()或 appendTo()方法可以在被选元素的结尾插入内容，因此可用于动态创建select控件

$("div").append("<select></select>") // 在已经存在的div标签下创建select元素

$("<option></option>").appendTo($("select")) // 为select元素添加option选项

实例演示：动态创建一个含有两个选项——“黑”“白”的select控件，并默认选中“白”这个选项

示例代码如下

创建Html元素

<div class="box">

<span>点击按钮后创建select标签，并默认选中“白”这个选项：</span><br>

<div class="content"></div>

<input type="button" value="创建select标签">

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

select{width:150pxheight:30pxborder:1px solid #6699FF}

---