Hiding/showing the select box options in jquery?

Question

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.

You cannot write `div` tag inside `select` and `option` tag. — Arvind Bhardwaj, Jan 03 '13 at 06:36
You may want to pursue using the span tab instead as that tag is inline. — Anthony Forloney, Jan 03 '13 at 06:38

score 3 · Accepted Answer · answered Jan 04 '13 at 11:47

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

answered Jan 04 '13 at 11:47

M Sach

33,416
76
221
314

@M Sach: I tried to apply your solution to my issue (http://stackoverflow.com/questions/20381003/jquery-and-css-hide-show-select-options-with-a-certain-css-class). 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 – Sefran2 Dec 05 '13 at 11:31

score 2 · Answer 2 · edited May 23 '17 at 12:32

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!

score 1 · Answer 3 · answered Jan 03 '13 at 06:38

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();

answered Jan 03 '13 at 06:38

Adil

146,340
25
209
204

that doesn't seem to be hiding them on my machine (os x/chrome 23)? – kieran Jan 03 '13 at 06:43
huh, hiding options isn't cross browser ([learn something new everyday](http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery)) – kieran Jan 03 '13 at 06:46
@ Kieran That seems true. It worked on Firefox but not on IE 8 – emilly Jan 03 '13 at 06:52

score 0 · Answer 4 · answered Jan 03 '13 at 06:37

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.

Ahmed Assaf · Answer 5 · 2013-01-03T07:32:28.723

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>

Hiding/showing the select box options in jquery?

5 Answers5