Обновить выберите несколько

Question

Я пытаюсь написать функцию для обновления «множественного» выбора (второго ниже) так, чтобы при выборе «Метода1» (из первого выбора) во втором выборе появлялись только опции 1А, 1В и 1С , а также для 2A, 2B ... только когда я выбираю Method2. Есть ли способ сделать это. Пожалуйста помоги. Большое спасибо заранее.

<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

Я не думаю, что есть кросс-браузерная поддержка для скрытия опций выбора.

Вот один из способов сделать это.Использует более jQuery-подобный метод обработки событий, поэтому вам нужно удалить встроенный onchange из HTML.

Попробуйте: 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();

Если вы не хотите каждый раз генерировать их на лету, вы можете создать каждую строку параметров и сохранить их в массиве, загружая их аналогичным образом.

Попробуйтеэто из: 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();

---

РЕДАКТИРОВАТЬ: Как отмечено @ You , чтобы обеспечить совместимость с браузерами, которые имеютJavaScript отключен, лучше всего иметь все доступные опции, доступные при загрузке страницы.Затем вы можете использовать приведенный выше код, чтобы перезаписать их для js-браузеров.

Элементы <optgroup> из ответа @ You будут отличной идеей в этом случае.

Answer 2

Сокрытие элементов - это не то, что вы должны делать на самом деле (и, следовательно, это невозможно в Webkit или IE).Вы можете отключить их, хотя.Используя этот 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>

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

Вы в основном отключите неподходящие параметры, что является "правильным" способом решения проблем.(И используйте <optgroup>, вот для чего это!)

_{Отказ от ответственности: Я не мог заставить это работать в Safari, но согласно спецификациям HTML4.01 и HTML5,это должно работать.Я не уверен, что происходит.}