Hide duplicate parameter value in select box using jquery or javascript

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>
      

        
        
        
      

    

• Have an array where you can put the text of each option
• Check if there is text in the array, if so then disable

Try using the function Array#includes()

and Array#push

.Push of the array innerText

, and then check that the new element text is in the array. If push c is not present in array.else, hide the respectable 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>
      

        
        
        
      

    

My approach is to create an object that contains the texts, and if the option text is already registered, it removes the parameter.

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

      

        
        
        
      

    

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, hidden options don't work. In this case, the only reliable way is to remove the elements from the DOM and read them when needed.

Try something like this:

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

      

        
        
        
      

    

Working script

Explanation: Make an empty array in it and push a unique value in it, checking if it exists. And hide the options that are duplicated.

Try the following:

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

      

        
        
        
      

    

https://jsfiddle.net/7ru87nfy/

To provide only separate text:

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

      

        
        
        
      

    

Part seen[ $(this).text() ]

undefined

if not set, so only the value of the invisible text will go to else

.

You can also set up a condition for more complex logic.

You can add data to parameters from an array. Find the unique one in this 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/

Enable option and remove duplicate 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>