Question

Is it possible to open a select element using jQuery? Either that or prevent it from closing when an element is selected. What I want to do is to add subelements in the option list when clicking specific options. This have to work like this:

Select some category ->
If any subcategory exists add these to the original select (easy enough) but this has to be done without closing the select drop-down box.

Is this possible or do I have to figure some other way to do this?

Answer 1

Whi don’t you use optgroup?

<select id="food" name="food">
  <optgroup label="Fruits">
    <option value="1">Apples</option>
    <option value="3">Bananas</option>
    <option value="4">Peaches</option>
    <option value="5">...</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="2">Carrots</option>
    <option value="6">Cucumbers</option>
   <option value="7">...</option>
 </optgroup>
 <optgroup label="Baked Goods">
   <option value="8">Apple Pie</option>
   <option value="9">Chocolate Cake</option>
   <option value="10">...</option>
 </optgroup>

Fiddle here (to see how it looks): http://jsfiddle.net/rn39c/

I think this might be what you are looking for because the categories are just label and the sub-categories are the option (with a value that is posted to the server)

EDIT – Then you could add some jQuery to thew mix (this is very basic but it works: you could try to improve it):

$('#food option').hide();

$('optgroup').hover(function(){
   $(this).children('option').show();
}, function(){
    $(this).children('option').hide();
});

fiddle here: http://jsfiddle.net/rn39c/1/