How to hide an option in a dropdown using jquery?

Question

We are populating the options in a dropdown through list.The values are added in a list in Action class. When option is equal to a particular value , we want to hide it.

Following is the code:

if (stuval.substring(0, 7) == "<option") {  
   $('#stuclass option:not(:first)').remove(); 
   $('#stuclass').find('option').end().append($(stuval));
   $("#stuclass option[value='not apply']").css("display", "none"); // Not working
}                         

How to hide the option when value is 'Not apply'?Tried with above code and using index.But it is not working.Kindly help.

Answer 1

May be a white-spaces, lower/uppercase in a value prevent it from the selection .. Some ways

1- Use * means contains [value*='not apply'] in this way you need to take-care about lowercase and upper case and use the exact value .. if its Not Apply you've to use [value*='Not Apply']

#stuclass option[value*="not apply"]{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

2- Use .filter() with toLowerCase() and .trim() .. I think this way is more efficient than the first one

$('#stuclass option').filter(function(){
  return $(this).val().toLowerCase().trim() == 'not apply'
}).hide(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

Beside note:

• .end() here $('#stuclass').find('option').end().append($(stuval)); will return to $('#stuclass') so you can directly use $('#stuclass').append($(stuval))

• Also if (stuval.substring(0, 7) == "<option") it will be better to be if (stuval.trim().substring(0, 7) == "<option") to avoid any left/right white-spaces OR you can use if(stuval.indexOf('<option') > -1)

For the select2

$(document).ready(function(){
  $('select').select2();
});

.select2-results [data-select2-id*="not apply"]{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

To hide the options from some of the select2 it can't be done by using css you can use javascript to remove the not apply option before append the select2 to the select you want

$(document).ready(function(){
  $('#stuclass , #stuclass3').find('[value*="not apply"]').remove();
  $('select').select2();
});

.select2{
  min-width : 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

<select id="stuclass2">
  <option value="apply">Apply 2</option>
  <option value= "not apply">Not Apply 2</option>
</select>

<select id="stuclass3">
  <option value="apply">Apply 3</option>
  <option value= "not apply">Not Apply 3</option>
</select>

<select id="stuclass4">
  <option value="apply">Apply 4</option>
  <option value= "not apply">Not Apply 4</option>
</select>