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

Question

使用jquery / Js如何隐藏重复文本的选项值。

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

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

<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脚本执行此操作。

感谢。

Answer 1

初始化空数组finishItems。

使用

在选择选项中循环

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

如果该选项不在列表中，则添加该选项（如果存在）将其删除。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用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>

Answer 3

我想这很有效。

＆＃13;

＆＃13;

$(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);
      }
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

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

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



})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

1. 有一个数组，您可以在其中放置每个选项的文本
2. 如果是，请检查文本是否在数组中，然后禁用

Answer 5

尝试使用Array#includes()和Array#push函数。将innerText推送到数组然后检查新元素文本是否在数组中。如果不存在则在array.else中使用push隐藏受尊重的元素< / p>

$(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>

Answer 6

我的方法是创建一个包含文本的对象，如果选项文本已经注册，则会删除该选项。

$(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;
      }
  }); 
});

Answer 7

一个简单的（vanilla）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中删除元素，并在需要时读取它们。

Answer 8

尝试这样的事情：

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

Working Fiddle

说明：在其中创建一个空白数组，并通过检查它是否已存在来推送其中的唯一值。并隐藏重复的选项。

Answer 9

试试这个：

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

https://jsfiddle.net/7ru87nfy/

Answer 10

仅确保不同的文字：

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

seen[ $(this).text() ]部分undefined如果未设置，则只有看不见的文字值才会转到else。

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

Answer 11

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 12

您可以在数组的选项中添加数据。在该数组中查找唯一。

<强> JS

 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/

Answer 13

您可以在新数组中存储text列表（请参阅我的代码示例中的arrHide），因此在循环选择的选项中，您可以检查当前文本是否已经存在在arrHide数组中，然后隐藏相关项。

请参阅以下内容：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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