HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

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">スタッフ1</option>
            <option value="1002">スタッフ2</option>
            <option value="1003">スタッフ3</option>
        </optgroup>
        <optgroup label="グループB">
            <option value="1004">スタッフ4</option>
            <option value="1005">スタッフ5</option>
        </optgroup>
        <optgroup label="グループC">
            <option value="1006">スタッフ6</option>
            <option value="1007">スタッフ7</option>
            <option value="1008">スタッフ8</option>
            <option value="1009">スタッフ9</option>
        </optgroup>
    </select>
</div>