Update select multiple

Question

I'm trying to write a function to update the "multiple" select (the second one below) such that when I select Method1 (from the first select), only the options 1A, 1B and 1C appears in the second select, and likewise for 2A, 2B... only when I select Method2. Is there a way to do this. Please help. Many thanks in advance.

<select name="choices" onchange="updatesub()">
    <option>Method1</option>
    <option>Method2</option>
</select>

<select multiple="multiple" name="sub">
    <option>1A</option>
    <option>1B</option>
    <option>1C</option>

    <option>2A</option>
    <option>2B</option>
    <option>2C</option>
</select>

Answer 1

Hiding the elements is not something you should be doing, really (and thus, it's not possible in Webkit or IE). You could disable them, though. Using this HTML:

<select id="choices">
    <option value="grp1">Method 1</option>
    <option value="grp2">Method 2</option>
</select>

<select id="sub" multiple>
    <optgroup label="Method 1" id="grp1">
        <option>1A</option>
        <option>1B</option>
        <option>1C</option>
    </optgroup>
    <optgroup label="Method 2" id="grp2">
        <option>2A</option>
        <option>2B</option>
        <option>2C</option>
    </optgroup>
</select>

And jQuery:

$(document).ready(function(){
    $("#choices").change(function(){
        $("#sub optgroup").attr("disabled", true);
        $("#sub optgroup#"+$(this).val()).attr("disabled", false);
    });
    $("#choices optgroup:not(#"+$("#choices option:selected").val()+")").attr("disabled", true);
});

You'll basically disable the options that are not applicable, which is the "proper" way to go about things. (And use <optgroup>, that's what it's for!)

_{Disclaimer: I couldn't get this working in Safari, but according to HTML4.01 and HTML5 specs, this should work. I'm not sure what's going on.}

Answer 2

I don't think there's cross browser support for hiding select options.

Here's one way to do it. Uses a more jQuery like method of handling events, so you'll need to remove the inline onchange from the HTML.

Try it out: http://jsfiddle.net/W9KvT/

var options = [
    ['1A','1B','1C'],
    ['2A','2B','2C']
];

$('select[name=choices]').change(function() {
    var idx = $(this).children(':selected').index();
    var set = '';
    for(var i = 0, len = options[idx].length; i < len; i++) {
        set += '<option>' + options[idx][i] + '</option>';
    }
    $('select[name=sub]').html(set);
}).change();

If you don't want to generate these on the fly each time, you could create each option string, and save them in the array, loading them in a similar manner.

Try it out: http://jsfiddle.net/W9KvT/1

var options = [
    '<option>1A</option><option>1B</option><option>1C</option>',
    '<option>2A</option><option>2B</option><option>2C</option>'
];

$('select[name=choices]').change(function() {
    var idx = $(this).children(':selected').index();
    $('select[name=sub]').html(options[idx]);
}).change();

---

EDIT: As noted by @You, in order to ensure compatibility with browsers that have javascript disabled, it is best to have all the available options available on page load. Then you can use the code above to overwrite them for js browsers.

The <optgroup> elements from @You's answer would be an excellent idea in that case.