使用jquery或javascript隐藏选择框中的重复选项文本值

使用jquery/Js如何隐藏重复文本的选项值。使用jquery或javascript隐藏选择框中的重复选项文本值

Main Goal is Remove repeated text option value from select box.

我只想隐藏的Test1和Test2的值为4,5和6号，因为它们的价值在选项框中重复。

<select name="finish" id="finish"> 
    <option value="">Finish</option> 
    <option id="1" value="1">Test1</option> 
    <option id="2" value="2">Test2</option> 
    <option id="3" value="3">Test3</option> 
    <option id="4" value="4">Test1</option> 
    <option id="5" value="5">Test1</option> 
    <option id="6" value="6">Test2</option> 
</select>

jQuery代码如下特林，

$(document).ready(function(){ 
    $('#finish').each(function(){ 
     //$(this).text().hide(); 
    }); 
});

最终结果的样子如下，

<select name="finish" id="finish"> 
    <option value="">Finish</option> 
    <option id="1" value="1">Test1</option> 
    <option id="2" value="2">Test2</option> 
    <option id="3" value="3">Test3</option> 
    <option id="4" value="4" style="display:none">Test1</option> 
    <option id="5" value="5" style="display:none">Test1</option> 
    <option id="6" value="6" style="display:none">Test2</option> 
</select>

如何做到这一点使用JavaScript或jQuery脚本。

谢谢。

来源

2017-05-09 Rakesh Jesadiya

只是一个评论：这不会在IE中工作。所以，如果你的目标是，你应该找到另一个解决方案。 – meskobalazs

好吧，让IE浏览器忽略，但如何做到以上情况在Firefox和铬。 –

[从选择下拉菜单中筛选重复选项]的可能重复（http://stackoverflow.com/questions/1875607/filter-duplicate-options-from-select-dropdown） –

Initailaize空数组finishItems。

选择选项内循环使用

$("select > option").each(function(){ 
});

如果选项不在列表中添加它，如果它存在，删除它。

var finishItems = {}; 
$("select > option").each(function() { 
if(finishItems[this.text]) { 
    $(this).remove(); 
} else { 
    finishItems[this.text] = this.value; 
}});

$(document).ready(function(){ 
 
var finishItems = {}; 
 
$("select > option").each(function() { 
 
    if(finishItems[this.text]) { 
 
    $(this).remove(); 
 
} else { 
 
    finishItems[this.text] = this.value; 
 
}}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

来源

2017-05-09 09:25:51

感谢您的回答。我会查一下。 –

@RakeshJesadiya如果它适合您，请接受该解决方案。 –

var arr = [] 
 
$("#finish option").each(function(i, v) { 
 
    if ($.inArray($(this).text(), arr) == -1) { 
 
    arr.push($(this).text()) 
 
    } else { 
 

 
    $(this).prop("disabled", true) 
 
    } 
 

 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

有一个数组，你可以把每个选项的文本
检查文本是否为数组，如果是，那么禁用

来源

2017-05-09 09:24:18 guradio

与Array#includes()和Array#push功能.Push尝试innerText到阵列然后检查新元素的文本是在array.If不存在推与array.else隐藏推崇元件

$(document).ready(function() { 
 
    var arr = []; 
 
    $('#finish option').each(function() { 
 
    var val = $(this).text().trim(); 
 
    if (!arr.includes(val)) { 
 
     arr.push(val) 
 
    } else { 
 
     $(this).hide(); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

来源

2017-05-09 09:27:00 prasanth

您可以使用filter()来过滤与前一个元素具有相同文本的元素以及一个用于存储文本的对象。

var obj = {}, select = $('select'); 
 

 
select.html(select.find('option').filter(function() { 
 
    var text = $(this).text(); 
 
    return !obj[text] ? obj[text] = 1 : false; 
 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

如果你只是想添加display: none来复制你可以使用each环代替。

var obj = {},select = $('select'); 
 

 
select.find('option').each(function() { 
 
    var text = $(this).text(); 
 
    !obj[text] ? obj[text] = 1 : $(this).css('display', 'none'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

来源

2017-05-09 09:27:18

我的做法是创建持有的文本，如果选择的文本已经注册它删除选项的对象。

$(document).ready(function(){ 
    var elements = {}; 
    $('#finish option').each(function(){ 
    console.log($(this).val(), this); 
     if(elements[$(this).text()]){ 
     $(this).remove(); 
     } else { 
     elements[$(this).text()] = true; 
     } 
    }); 
});

来源

2017-05-09 09:29:31 kimy82

一个简单的醛（香草）的Javascript溶液：

var options = document.getElementById('finish').options; 
var contents = []; 
for (var i = 0; i < options.length; i++) { 
    if (contents.includes(options[i].textContent)) { 
     options[i].style.display = 'none'; 
    } else { 
     contents.push(options[i].textContent); 
    } 
}

在IE中，隐藏选项不起作用。在这种情况下，唯一可靠的方法是从DOM中删除元素，并在需要时读取它们。

来源

2017-05-09 09:29:50 meskobalazs

尝试这样：

var arr = []; 
$('#finish option').each(function(){ 
    if($.inArray($(this).text(), arr) == -1) 
    { 
    arr.push($(this).text()); 
    } 
    else 
    { 
    $(this).hide(); 
    } 
});

Working Fiddle

说明：在IT领域的空白阵列，以及如果它已经存在，检查它推的独特价值。并隐藏重复的选项。

来源

2017-05-09 09:29:51

循环选项并删除重复的值。

var repeatText = {}; 
 
$("#finish > option").each(function() { 
 
    if(repeatText[this.text]) { 
 
    $(this).remove(); 
 
} else { 
 
    repeatText[this.text] = this.value; 
 
}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

来源

2017-05-09 09:30:58

试试这个：

var seen = {}; 
$('#finish option').each(function() { 
    var txt = $(this).text(); 
    if (seen[txt]) 
     $(this).hide(); 
    else 
     seen[txt] = true; 
});

https://jsfiddle.net/7ru87nfy/

来源

2017-05-09 09:31:44 zerek

要确保只有不同的文字：

var seen = {} 
$(document).ready(function(){ 
    $('#finish').each(function(){ 
     if (seen[ $(this).text() ]) { 
      $(this).hide(); 
     } else { 
      seen[$(this).text()] = true; 
     } 
    }); 
});

seen[ $(this).text() ]部分为undefined如果未设置，则只有看不到的文本值将转至else。

您还可以调整更复杂逻辑的条件。

来源

2017-05-09 09:31:46 Larandar

我想这个工程。

$(document).ready(function(){ 
 
    var values231 = []; 
 
    $.each($('option'), function(){ 
 
     var flag = false; 
 
     var thishtml = $(this).html(); 
 
     for(var i = 0; i< values231.length; i++){ 
 
     if(thishtml == values231[i]){ 
 
      $(this).hide(); 
 
      flag = true; 
 
     } 
 
     } 
 
     if(!flag){ 
 
     values231.push(thishtml); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

来源

2017-05-09 09:32:09

只需删除调试器，它的工作正常。 –

您可以从阵列选项添加数据。在该阵列中查找唯一。

var array = ["Test1", "Test2", "Test3", "Test1", "Test1", "Test2"] 
    var json = _.uniq(array); 
    $.each(json, function(i, value) { 
    $('#finish').append($('<option>').text(value).attr({ 
     'value': i+1, 
     'id': i+1 
    })); 
    });

HTML

<select name="finish" id="finish" class="form-control"> 
    <option value="">Finish</option> 
</select>

演示：https://jsfiddle.net/sumitridhal/kg3pp367/

来源

2017-05-09 09:35:33

你可以存储在一个新阵列的text列表（见arrHide在我的代码示例），所以在通过select的选项循环中，您可以检查当前文本是否已经在arrHide数组中，然后隐藏相关项目。

见下面，请：

var arrHide = []; 
 
$("#finish > option").each(function() { 
 
    if($.inArray(this.text, arrHide) < 0){ 
 
    arrHide.push(this.text); 
 
    } 
 
    else { 
 
    $(this).hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

我希望它可以帮助你，再见。

来源

2017-05-09 09:39:28 Alessandro

使用jquery或javascript隐藏选择框中的重复选项文本值

回答

相关问题