Home/ Questions/Q 9093921
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T23:13:35+00:00

i have below code snippet in jsp <HTML> <BODY> <select id=customerIds onchange=doOperation()> <option value=default>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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');
  }
    • 0