Hiding/showing the select box options in jquery?
drop-down-menu, html, javascript, jquery
Solution
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');
}
Problem
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.