I have a form with following features :

the purpose of the form is to obtain an item code. items are classified in categories. first i will display a select list of categories. once the user selects a particular category, i will display the items belonging to that category only, in the second select list.

for this purpose i am storing three variables.
first variables contains an array of ALL items. They are grouped with respective categories as OPTGROUP. The OPTGROUP label is the description of the category. this variable is hidden.

the second variable is a select list of all categories. the label is the 'category description' while the value is the 'category code'.

the third variable is an empty select list meant for displaying the items of the category chosen.

my requirement is this :

when the user selects a category, i will search the hidden variable (first one - as stated above) for an optgroup having a label matching the selected category. then i will extract all the options under that group (which represent the items belonging to that category) and append them to the empty select list (third one described above) meant for items.

i do not want to have any ajax or JSON option, because i feel that extracting and storing the select lists in one go may be more efficient.

please help me to achieve the aforesaid functionality using jquery.

regards and thanks in advance

• jquery
• css-selectors

well I think the easiest way to implement this using jQuery is using selectors, you can just generate a HTML that looks like:

<select id="myCategories">
  <option value="cat1">Category 1</option>
  <option value="cat2">Category 2</option>
</select>
<select id="myItems">
  <option OPTGROUP="cat1">item 1</option>
  <option OPTGROUP="cat2">item 2</option>
  <option OPTGROUP="cat1">item 3</option>
</select>

and your javaScript code:

var $myCategories = $(select#myCategories);
var $myItems = $(select#myItems);
// you can start with all options hidden
$myItems.find('option').hide();

myCategories.change(function() {
// we hide all options
  $myItems.find('option').hide();
// we show the categoies options
  $myItems.find('option[OPTGROUP="' +myCategories.val()+ '"]').show();
})

I haven't test this code, but will give you an idea

i tried the following script to solve my problem and it seems to be working

$(document).ready(function(){   

    $("#catKey").focus(
        function()  {
        $("#itemKey").empty();
        $("input").css("font-style", "italic");
    }
    );
    $("#catKey").change(onSelectChange);
});


function onSelectChange()   {
    $catSelected = jQuery('#catKey option:selected').val();
    $("#itemKey").empty();
    $('#itemKeys optgroup[label= ' + $catSelected + ']').children().clone().appendTo("#itemKey");

    /*
    $("#itemKey").append($('#itemKeys optgroup[label= ' + $catSelected + ']').children());
    */
}