4

i have below code snippet 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>

on click of certain button, i want to hide the options with id as "action1" and display the options with Id as "action2". So i tried this

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

But that did not work.Not getting whats the issue? In firebug when i tried to inspect the select box, i did not find any div tag(i.e with ids action1/action2 ) above options.

Improve this question
2
  • 1
    You cannot write div tag inside select and option tag. Commented Jan 3, 2013 at 6:36
  • You may want to pursue using the span tab instead as that tag is inline. Commented Jan 3, 2013 at 6:38

5 Answers 5

Reset to default
3

Use below javascript function where showOptionsClass is the class given to each option you want to show. This will work in 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'); }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@M Sach: I tried to apply your solution to my issue (stackoverflow.com/questions/20381003/…). It doesn't work on IE 10 and Chrome, meanwhile on Firefox it works only if I refresh the page and I can see all the options at the first time. I would to have the only "Choose..." option and, when the user chooses a value from the first select, display only the corresponding options and the "Choose..." option selected
2

You may not have <div> elements within a <select>, see for example this stackoverflow on the topic, which references this bit of the HTML spec.

Further, hiding options isn't cross browser compatible (see this stackoverflow (second answer)), as @Voitek Zylinski suggests, you would probably be better off keeping multiple copies of the select and toggling between them, or if keeping the id attribute is required then maybe even adjusting the innerHtml (yuck...).

You could maybe approach it like:

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 exactly ideal though!

Improve this answer

Comments

1

You can not use div to group but you can assign 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();​
Improve this answer

3 Comments

that doesn't seem to be hiding them on my machine (os x/chrome 23)?
huh, hiding options isn't cross browser (learn something new everyday)
@ Kieran That seems true. It worked on Firefox but not on IE 8
0

You can't group options inside a div. You can group them inside an <optgroup>, but I don't think that's what you're aiming for.

What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options.

Improve this answer

Comments

0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.