3

I'm very very new to jQuery. I Googled a lot before I'm asking, though it looks silly but for me its complicated.

I have a simple <select> list which has around 4 values like this image shown below.

enter image description here

Now at runtime, I want to hide the options and show based on index or value names in jQuery. How can I achieve this?.

My drop down box has a div region and simple select option with set of values. Please provide me a simple example.

Sample code

<Div ID = "abcd">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</div>

In this how to hide Volvo/Opel at run time?... like i want to show and hide these options dynamically.

Like Ex: When a button is pressed i want to hide Volvo. Similarly if another button is pressed i want to display Volvo back.

user229044
  • 232,980
  • 40
  • 330
  • 338
Naruto
  • 9,476
  • 37
  • 118
  • 201

1 Answers1

2

if you would like to hide the whole select you should give your select or the div containing your select an id and then you can do like :

<div id="mySelect" >your select tag here </div>

$('mySelect').show(); // or $('mySelect').hide();

http://api.jquery.com/hide/

http://api.jquery.com/show/

if you would like to hide the option you can do like below :

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();

To be more specific to your code :

<div id="abcd">
<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</div>

title = 'volvo';
$("#mySelect option[value=" + title + "]").hide();

like in this post : Hide options in a select list using jQuery

or remove it :

JQuery: Hide options of select according to option value

Community
  • 1
  • 1
Mehdi Karamosly
  • 5,388
  • 2
  • 32
  • 50
  • thanks, in this case edit-field-service-sub-cat-value is my DIV ID, tittle is Value like Volvo, or opel etc.. correct??? – Naruto Dec 20 '12 at 18:05
  • Yes that was just an example from stackoverflow you just replace that with your id. – Mehdi Karamosly Dec 20 '12 at 18:06
  • keep in mind hiding the element if it is currently selected (in some browsers) still displays the value as the current index (as well as selectedIndex property) however the value (option) is no longer visible for selection. This could cause problems in the future. I would be more inclined to 'detach' and 'attach' the element to and from the list. – rlemon Dec 20 '12 at 18:32
  • @MehdiKaramosly, i tried like this, var title = "Volvo"; $(Bus + "-Names" + "option[value=" + title + "]").hide();. But not worked :( – Naruto Dec 21 '12 at 02:38
  • In the selector you should put space between the id and the option like this : `var title = "Volvo"; $(Bus + "-Names" + " option[value=" + title + "]").hide();` let me know if this works. – Mehdi Karamosly Dec 21 '12 at 16:40