Files
zszq-trs/YLErpWeb/Views/Demo/BsSelect.cshtml
T
2024-05-09 14:06:26 +08:00

63 lines
1.9 KiB
Plaintext

@{
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>
}