Question

jquery 如何去除select 控件重复的option

比如
<select >
<option>1 </option>
<option>1 </option>
<option>2 </option>
<option>2 </option>
<option>3</option>
</select>

要变成
<select >
<option>1 </option>
<option>2 </option>
<option>3</option>
</select>
如何做，请给个示例

Answer 1

这个问题最好应该在后台中处理掉——创建select元素之前就过滤掉重复的元素。如果必须要在页面中处理，方法也比较多，这里提供一个使用jquery选择器 :contains 的方法：

$(":contains(text)");  // 选取包含指定字符串的元素

这样就可以选出包含重复字符串的option元素，然后将其删掉

示例代码如下

1. 创建Html元素

   <div class="box">
   	<span>点击按钮删除select控件中的重复元素：</span><br>
   	<div class="content">
   		<select >
   			<option>1</option>
   			<option>1</option>
   			<option>2</option>
   			<option>2</option>
   			<option>3</option>
   		</select>
   	</div>
   	<input type="button" value="删除重复项">	
   </div>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
   select{width:150px;height:30px;margin:5px 0;border:1px solid #6699FF;}
   input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3. 编写jquery代码

   $(function(){
   	$(":button").click(function() {
   		$("select option").each(function() {
   			text = $(this).text();
   			if($("select option:contains("+text+")").length > 1)
   				$("select option:contains("+text+"):gt(0)").remove();
   		});
   	});
   })

4. 观察效果

• 初始状态

  

• 点击按钮删除重复项之后

  

Answer 2

1.遍历option值是否存在，有删除节点
2.将所有的值放入数组去除重复数据，再更新select子节点

Answer 3

$("select").each(function(i,n){
var options = "";
$(n).find("option").each(function(j,m){
if(options.indexOf($(m)[0].outerHTML) == -1)
{
options += $(m)[0].outerHTML;
}
});
$(n).html(options);
});
这个是循环所有select，查找每个select，并重新给select的html赋值

Answer 4

<!-- 徐士刚jquery实现异步三级联动 -->
<script type="text/javascript">
var flagflag = false;
$(function(){
$.post("dropdownlist!selectAllProvinceCityTown.action",function(data){
var json=eval(data);
for(var i = 0,len = json.length; i<len; i++){
if($==json[i].id){
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#provinceid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querycitybyprovince();

}

else
{
$('#provinceid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}
},"json");

$('#provinceid').change(function(){
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querycitybyprovince();
});
});
function querycitybyprovince()
{
var provinceid = document.getElementById('provinceid').value;
if(provinceid==1)
{
provinceid = -1;
}
$.post("dropdownlist!selectAllProvinceCityTown.action",,function(data){

var json=eval(data);

for(var i = 0,len = json.length; i<len; i++){
if($==json[i].id){
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#cityid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querytownbycity();

}
else{
$('#cityid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}

$('#cityid').change(function(){
//clearOptions(document.getElementById('townid'));
//$('#townid').empty();
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querytownbycity();
},"json");
});
}

function querytownbycity()
{

var cityid = document.getElementById('cityid').value
$.post("dropdownlist!selectAllProvinceCityTown.action",,function(data){

var json=eval(data);
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
for(var i = 0,len = json.length; i<len; i++){
if($==json[i].id){
$('#townid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
}
else{
$('#townid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}

},"json");
}

页面端：
<select name="provinceid" class="bk_01" id="provinceid"
style="WIDTH: 120px">
<option value="1">
---请选择---
</option>
</select>
<select name="cityid" class="bk_01" id="cityid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
<select name="townid" class="bk_01" id="townid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
希望对你有帮助，希望及时采纳，谢谢！