Hide repeated option text value in select box using jquery or javascript

Question

Using jquery/Js how to hide option value for repeated text.

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

I want to just hide Test1 and Test2 with id value 4,5 and 6 because their value are repeated in option box.

<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 code is tring below,

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

Final result look like as below,

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

How to do this using javascript or jquery script.

Thanks.

Answer 1

Initailaize empty array finishItems .

Loop inside the select options using

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

If the option is not in list add it, if it exist removes it.

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> 

Answer 2

You can use filter() to filter elements that have the same text as some previous element and one object to store text.

 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> 

If you just want to add display: none to duplicates you can use each loop instead.

 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

I guess this works .

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

Answer 4

 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> 

1. Have an array where you can put the text of each option
2. Check if the text is in array if yes then disable

Answer 5

Try with Array#includes() and Array#push function .Push the innerText to array then check new element text is in array.If not present push with in array.else hide the respected element

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

My approach would be to create an object which holds texts and if the option text is already registered it removes the option.

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

A simple (vanilla) Javascript solution:

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

In IE, hiding options does not work. In that case, the only reliable way is deleting the elements from the DOM, and readding them if needed.

Answer 8

Try something like this:

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

Working Fiddle

Explanation: Make an blank array in it, and push the unique value in it by checking if it already exist. And hide the options which are duplicate.

Answer 9

Try this :

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

To ensure distinct text only:

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

The seen[ $(this).text() ] part is undefined if not set, so only unseen text value will go to the else .

You can also tweak the condition for more complex logic.

Answer 11

Loop in option and remove repeated value.

 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> 

Answer 12

You can add data in options from array. Find Unique in that array.

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>

Demo: https://jsfiddle.net/sumitridhal/kg3pp367/

Answer 13

You could store a list of text in a new array (see arrHide in my code example), so in a loop through select's options you could check if current text is already in the arrHide array then hide the relative item.

See following, please:

 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> 

I hope it helps you, bye.