Hide / show select box options in jquery?

Question

Hide / show select box options in jquery?

I have code below in jsp

<HTML> <BODY> <select id="customerIds" onchange="doOperation()"> <option value="default"> Start..</option> <div id="action1" class="action1"> <option value="1"> 1</option> <option value="2"> 2</option> <option value="3"> 3 </option> </div> <div id="action2" class="action2"> <option value="4"> 4 </option> </div> <option value="5"> 5 </option> </select> </BODY> </HTML>

when I click a certain button, I want to hide the parameters with the identifier as "action1" and display the parameters with Id as "action2". So i tried this

  $('#action1').hide(); $('#action2').show();

But that did not work. I don’t understand what is the problem? In firebug, when I tried to check the select box, I did not find a single div tag (i.e. with ids action1 / action2) above the parameters.

+4

javascript jquery html drop-down-menu

emilly Jan 03 '13 at 6:34

source share

5 answers

You may not have <div> elements in <select> , see for example fooobar.com/questions/1455644 / ... , which refers to this bit of the HTML specification.

In addition, the hide options are not compatible with the browser (see fooobar.com/questions/63086 / ... , as @Voitek Zylinski suggests, you would probably be better off saving multiple copies of the selection and switching between them, or if you want to keep the attribute id , or maybe even configure innerHtml (yuck ...).

You could approach it like this:

Markup

 <select onchange="doOperation()" class="js-opt-a"> <option value="default"> Start..</option> <option value="1"> 1</option> <option value="2"> 2</option> <option value="3"> 3 </option> </select> <select onchange="doOperation()" class="js-opt-b"> <option value="default">Start...</option> <option value="4"> 4 </option> <option value="5"> 5 </option> </select>

Js

 function doOperation() { /*whatever*/} $(".js-opt-a").hide(); $(".js-opt-b").show();

See for example this jsfiddle

Not quite perfect though!

+2

kieran Jan 03 '13 at 6:52

source share

You cannot use a div to group, but you can assign a class to options to group them.

Live demo

 <select id="customerIds" onchange="doOperation()"> <option value="default"> Start..</option> <option value="1" class="action1"> 1</option> <option value="2" class="action1"> 2</option> <option value="3" class="action1"> 3 </option> <option value="4" class="action2"> 4 </option> <option value="5" class="action3"> 5 </option> </select> $('.action1').hide(); $('.action2').show();

+1

Adil Jan 03 '13 at 6:38

source share

You cannot group parameters inside a div. You can group them inside the optgroup , but I don’t think what you are aiming for.

Instead, you should either create two drop-down lists that you switch between or save one drop-down list and re-populate its parameters.

0

Voitek Zylinski Jan 03 '13 at 6:37

source share

You can try this code:

 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#hide").click(function(){ $('.action1').wrap('<span></span>').hide(); }); $("#show").click(function(){ $('.action1').unwrap('<span></span>').show(); }); }); </script> </head> <body> <select id="customerIds" onchange="doOperation()"> <option value="default"> Start..</option> <option value="1" class="action1"> 1</option> <option value="2" class="action1"> 2</option> <option value="3" class="action1"> 3 </option> <option value="4" class="action2"> 4 </option> <option value="5" class="action3"> 5 </option> </select> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html>

0

Ahmed assaf Jan 03 '13 at 7:23

source share

M sach · Accepted Answer · 2013-01-04T11:47:13+0000

Use the javascript function below, where showOptionsClass is the class assigned to each parameter you want to show. This will work in a cross browser.

 function showHideSelectOptions(showOptionsClass) { var optionsSelect = $('#selectId'); optionsSelect.find('option').map(function() { return $(this).parent('span').length == 0 ? this : null; }).wrap('<span>').attr('selected', false).hide(); optionsSelect.find('option.' + showOptionsClass).unwrap().show() .first().attr('selected', 'selected'); }

Hide / show select box options in jquery?

More articles: