@{
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}

<div class="yc-panel">
    <h3>多选下拉框</h3>
    <hr />
    <div class="form-group">
        <label class="formlabel">客户</label>
        <select id="clientSelect">
            <option></option>
            <option value="1">客户1</option>
            <option value="2">客户2</option>
            <option value="3">客户3</option>
        </select>
    </div>
    <div class="form-group">
        <label class="formlabel">部门</label>
        <select id="depSelect" multiple></select>
    </div>
    <div class="form-group" id="divShow">

    </div>
</div>

@section JS{
    <script>

        function updateDepItems(clientId) {
            var items = [];
            switch (clientId) {
                case "1":
                    items = [{ text: "部门11", value: "11" }, { text: "部门12", value: "12" }, { text: "部门13", value: "13" }];
                    break;
                case "2":
                    items = [{ text: "部门22", value: "22",selected:true }, { text: "部门23", value: "23" }];
                    break;
                case "3":
                    items = [{ text: "部门33", value: "33" }];
                    break;
            }
            let html = _.reduce(items, (sum, cur) => sum + `<option value="${cur.value}" ${cur.selected?"selected":""}>${cur.text}</option>`, "");
            $('#depSelect').html(html).selectpicker('refresh');
        }

        $(function () {

            $('#clientSelect').on('change', function () {
                updateDepItems($('#clientSelect').val());
            });

            $('#depSelect').val('').selectpicker({
                liveSearch: true,
                selectAllText: '全选',
                deselectAllText: '全不选',
                actionsBox: true
            }).on('change', function () {
                $('#divShow').text($('#depSelect').val());
            });
        });

    </script>
}