我正在使用 asp.net 和 c# 開發一個學校專案，我需要讓我的多選下拉選單在文本框中顯示選擇的專案數，就像我選擇超過 4 個元素時他所做的那樣，但我需要始終這樣做。存在這樣做的任何方式，并且存在使文本框始終具有相同寬度的任何方式。
那是我什么都不選擇時的框
那是我選擇 1,2 或 3 個元素時的框
那是我選擇超過 4 個選項時的框
我的選擇代碼。
<select class="listbox" asp-for="ap" multiple" >
@foreach(var i in Model.Aps)
{
<option value=@i.ap_id> @i.ap_name </option>
}
</select>
<script type="text/javascript">
$(function () {
$(".listbox").multiselect({
includeSelectAllOption: true
});
});
</script>
當我選擇超過 4 個選項時，我想顯示，但總是，即使我只選擇 1,2 或 3 個元素，是否存在這樣做的任何方式？并且存在任何僅顯示 10 個元素并且必須向下滾動才能查看其余元素的方式嗎？
uj5u.com熱心網友回復：
使用此版本的多選引導程式使文本框具有相同的寬度
"library": "[email protected]",
"destination": "wwwroot/lib/bootstrap-multiselect/"
和
<script type="text/javascript">
$(function () {
$(".listbox").multiselect({
includeSelectAllOption: true,
buttonWidth: '100%',
numberDisplayed: 5,
});
});
</script>
numberDisplayed 表示您在顯示“x selected”之前選擇了多少選項
uj5u.com熱心網友回復：
下面是作業demo，大家可以參考。
@model ViewM
@{
Layout = null;
}
//using CSS to adjust the length of the scroll boxshow then show the elements you want
<style>
.multiselect-container{
max-height:282px;
overflow:auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<select class="listbox" asp-for="ap" multiple >
@foreach(var i in Model.Aps)
{
<option value=@i.ap_id> @i.ap_name </option>
}
</select>
<script type="text/javascript">
$(function () {
$(".listbox").multiselect({
includeSelectAllOption: true,
numberDisplayed: 0// set numberDisplayed to 0 then you can get just select 1,2 or 3
});
});
</script>
參考：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/472712.html
標籤：javascript C＃ 网 asp.net 核心 引导多选
上一篇：ASP.Net在ActionResult中提交時獲取空值
下一篇：將輸入值傳遞給asp-route