select optgroup option 選択サンプル

コンボボックスからグループ名を指定すると、そのグループ名をラベルにもつ optgroup のすべてのオプションを選択します。

コード

$(function() {
    $("input:submit, a, button", ".toolbar").button();

    $('#group_select').change(function() {
        // 選択されたグループ名を取得
        var label = $("#group_select option:selected").text();
        // グループ名と一致するオプショングループのオプションを選択
        $('#staff_select optgroup[label="' + label + '"]').children().prop('selected', true);
    });

    $('#selectall').click(function() {
        // すべて選択
        $('#staff_select option').prop('selected', true);
    });

    $('#reset').click(function() {
        // 選択解除
        $('#staff_select option').prop('selected', false);
    });
});
    

HTMLコード

<style>
div select{
    width: 200px;
    padding: 5px;
}
div select option{
    padding-left: 10px;
}
</style>

<div class="toolbar">
    <select id="group_select">
        <option value="">グループ選択</option>
        <option value="a">グループA</option>
        <option value="b">グループB</option>
        <option value="c">グループC</option>
    </select>
	<button type="button" id="selectall">すべて選択</button>
	<button type="button" id="reset">選択解除</button>
</div>
<div>
    <select name="staff[]" id="staff_select" multiple="multiple" size="15">
        <optgroup label="グループA">
            <option value="1001">スタッフ１</option>
            <option value="1002">スタッフ２</option>
            <option value="1003">スタッフ３</option>
        </optgroup>
        <optgroup label="グループB">
            <option value="1004">スタッフ４</option>
            <option value="1005">スタッフ５</option>
        </optgroup>
        <optgroup label="グループC">
            <option value="1006">スタッフ６</option>
            <option value="1007">スタッフ７</option>
            <option value="1008">スタッフ８</option>
            <option value="1009">スタッフ９</option>
        </optgroup>
    </select>
</div>