Hide the option tag where value ="2018"

Question

I want to hide the option field "2018" from the dropdown. following is the html code:

<div class="form-field-select"><select name="tourtax[pa_ar]">
<option value="0">Välj år</option>
<option value="2018" selected="selected">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option></select>
</div>

jQuery:

jQuery('[name=tourtax] option[value=2018]').hide();

This is code is not helping me to hide 2018 from the dropdown. Please help me

Possible duplicate of [Hide options in a select list using jQuery](https://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery) — Shreyansh Panchal, Mar 02 '19 at 13:15

score 2 · Answer 1 · answered Mar 02 '19 at 13:06

There are a couple of things:

The name of the select is tourtax[pa_ar], not just tourtax. And since that includes [], you need to put the value of the name in quotes.
Since the value of the option starts with a digit, it's best to wrap the value you're matching in quotes.
Not all platforms allow you to hide option elements, but you can remove them.

Doing all three:

jQuery('[name="tourtax[pa_ar]"] option[value="2018"]').remove();

<div class="form-field-select"><select name="tourtax[pa_ar]">
<option value="0">Välj år</option>
<option value="2018" selected="selected">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option></select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You might be able to just hide it if you make it not selected first, but it doesn't work in IE11 (it works in Chrome and Firefox):

jQuery('[name="tourtax[pa_ar]"] option[value="2018"]').prop("selected", false).hide();

<div class="form-field-select"><select name="tourtax[pa_ar]">
<option value="0">Välj år</option>
<option value="2018" selected="selected">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option></select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Shubham Dixit · Answer 2 · 2019-03-02T13:19:31.130

This will do,but you have to remove the selected attribute from it.

$(document).ready(function(){
$("[name='tourtax[pa_ar]'] option[value='2018']").hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-field-select"><select name="tourtax[pa_ar]" >
<option value="0">Välj år</option>
<option value="2018" selected="selected">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option></select>
</div>

pedram shabani · Accepted Answer · 2019-03-02T13:19:33.993

Try it if your name attribute is not constant

   $("[name^=tourtax] option[value='2020']").remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-field-select">
  <select  name="tourtax[pa_ar]">
  <option value="0">Välj år</option>
  <option value="2018" selected="selected">2018</option>
  <option value="2019">2019</option>
  <option value="2020">2020</option>
  <option value="2021">2021</option>
  </select>
</div>

Hide the option tag where value ="2018"

3 Answers3