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

Posted 2023-02-16

比如
<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>
如何做，请给个示例

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

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

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

示例代码如下

创建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>

设置css样式

div.boxwidth:300px;padding:20px;margin:20px;border:4px dashed #ccc;
div.box spancolor:#999;font-style:italic;
div.contentwidth:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;
selectwidth:150px;height:30px;margin:5px 0;border:1px solid #6699FF;
input[type='button']height:30px;margin:10px;padding:5px 10px;

编写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();
);
);
)

观察效果

初始状态



点击按钮删除重复项之后

参考技术A 1.遍历option值是否存在，有删除节点
2.将所有的值放入数组去除重复数据，再更新select子节点 参考技术B $("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赋值本回答被提问者和网友采纳 参考技术C <!-- 徐士刚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>
希望对你有帮助，希望及时采纳，谢谢！