教你如何用jquery去除select控件重复的option选项 select option去重方法

对于OPTION选项，如果是通过后端读取，有可能会出现多个重复项目，这样用户在选择的时候就可能存在困扰，也不美观，这里教你如何对HTML代码中的SELECT OPTION的选项进行去重

方法有很多，因为JQ引用最广，所以我们这里使用jquery选择器 :contains 的方法:

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

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

案例如下：

1、先创建一个Html元素  

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

  (2)编写jquery代码

$(function(){
$("#btndel").click(function() {
$("#selectTest option").each(function() {   /*作用:遍历select option */
var getText = $(this).text();
if($("#selectTest option:contains("+getText+")").length > 1)   /*作用:select option:contains("+text+")")包含text的个数 */
{
 $("#selectTest option:contains("+getText+"):gt(0)").remove();  /*作用:包含text大于个数0的选项就移除*/
}
});
 });
   });

当然要记得引入JQ