快捷搜索:   nginx

教你如何用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

顶(1)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论