如何通過bootstrap multiselect使用複選框創建下拉菜單？

我工作的MVC 5，有有如何通過bootstrap multiselect使用複選框創建下拉菜單？

@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control " })

我想要做引導多選下拉列表與複選框。因爲，我曾嘗試：

<script src="~/Scripts/bootstrap-multiselect.js"></script> 
 
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" /> 
 

 
<script type="text/javascript"> 
 
    $(function() { 
 
     $('[id*=DDLServiceCate]').multiselect({ 
 
      includeSelectAllOption: true 
 
     }); 
 
    }); 
 
</script>

但是實現這個之後，看起來像下面的圖片。

但實際上我想看起來像下面顯示。

我怎樣才能做到這一點？

來源

2017-03-24 AbhiJA

你可以使用這個插件。我希望這會符合你的要求。

Multiple Select (MultiSelect)

這是工作fiddle。

這是一個工作示例。

<html> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" /> 
 
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
 
    $(function() { 
 
     $('#lstFruits').multiselect({ 
 
      includeSelectAllOption: true 
 
     }); 
 

 
     $('#btnSelected').click(function() { 
 
      var selected = $("#lstFruits option:selected"); 
 
      var message = ""; 
 
      selected.each(function() { 
 
       message += $(this).text() + " " + $(this).val() + "\n"; 
 
      }); 
 
      alert(message); 
 
     }); 
 
    }); 
 
</script> 
 

 
<body> 
 
    <select id="lstFruits" multiple="multiple"> 
 
     <option value="1">Mango</option> 
 
     <option value="2">Apple</option> 
 
     <option value="3">Banana</option> 
 
     <option value="4">Guava</option> 
 
     <option value="5">Orange</option> 
 
    </select> 
 
    <input type="button" id="btnSelected" value="Get Selected" /> 
 
</body> 
 

 
</html>

來源

2017-03-24 04:55:53 Nitheesh

仍然顯示單選按鈕的下拉列表。我正在使用drowpdownlistfor。 – AbhiJA

@AbhiJA你能發佈你的完整代碼嗎？ – Nitheesh

在這裏，我已經發布了所有的代碼。但使用此代碼後，瀏覽器控制檯顯示錯誤。錯誤：'Bootstrap的JavaScript需要jQuery版本1.9.1或更高版本，但低於版本3' – AbhiJA

我都做了，

<script src="~/Scripts/bootstrap-multiselect.js"></script> 
 
    <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" /> 
 
    
 
<script type="text/javascript"> 
 
    $(function() { 
 
     $('[id*=DDLServiceCate]').multiselect({ 
 
      includeSelectAllOption: true, buttonWidth: '200px' 
 
     }); 
 
    }); 
 
</script>

而且裏面drowpdown我加入 '@multiple = 「多」'

@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "None selected ", new { @id = "DDLServiceCate", @class = "form-control", @multiple = "multiple" })

現在顯示裏面drowpdownlistfor複選框。

來源

2017-03-24 10:22:28 AbhiJA

如何通過bootstrap multiselect使用複選框創建下拉菜單？

回答

相關問題