Question

我在asp.net mvc程序中包含了bootstrap库文件（fonts，js，css），并尝试执行多选下拉列表的程序，但它无法正常工作。请帮忙。我附加代码。下面的代码包含html代码和jquery代码，我试图通过调用html文件中的TodoList.js来执行。

@{
    ViewBag.Title = "TodoList";
}

<h2>TodoList</h2>
<div>
    <table id="ListGrid">

    </table>
    <div id="pager"></div>
</div>
<br />
<br />
@*<div id="div2"></div>*@
<table id="records_table" border='1'>
    <tr>
        <th>Firstname</th>
        <th>LastName</th>
        @*<th>Salary</th>
        <th>Gender</th>*@
    </tr>
</table>
<br />
<br />

<input type="button" id="btn2" value="SUBMIT" />
<select id="st1">
  <option value="option1">This is option1</option>
  <option value="option2">This is option2</option>
  <option value="option3">This is option3</option>
  <option value="option4">This is option4</option>
</select>
<input type="button" id="btn3" value="Next Page" />
<br />
<br />
<br />
<div class="location">
<table id="table_header">
    <tr>
        <th>Username</th>
        <th>Password</th>       
    </tr>


</table>
</div>
<br />
<br />
<br />
<form id="form1">
    <div style="padding:20px;">
        <select id="chkveg" multiple="multiple">
                            <option value="cheese">Cheese</option>
                            <option value="tomatoes">Tomatoes</option>
                            <option value="mozarella">Mozzarella</option>
                            <option value="mushrooms">Mushrooms</option>
                            <option value="pepperoni">Pepperoni</option>
                            <option value="onions">Onions</option>
                        </select><br /><br />
                        <input type="button" id="btnget" value="Get Selected Values" />

    </div>
    </form>
<link rel="stylesheet" href="~/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="~/css/bootstrap-multiselect.css" type="text/css" />
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/TodoList.js"></script> 
<script type="text/javascript" src="~/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/bootstrap-multiselect.js"></script>

TodoList.js： -

$(document).ready(function () {
    $('#chkveg').multiselect({
        includeSelectAllOption: true
    });
    $('#btnget').click(function () {
        alert($('#chkveg').val());
    });
    $('#chkveg').multiselect();
});

Answer 1

保留/包含您的ToDoList.js，如下所示：

<script type="text/javascript" src="~/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/bootstrap-multiselect.js"></script>
<script src="~/Scripts/TodoList.js"></script> <!--Keep it here-->

由于bootstrap-multiselect.js文件包含ToDoList.js中调用的函数的定义，因此必须先加载它。

Answer 2

添加属性multiple =“multiple”

public int [] selectedValue
{get;set;}
    @Html.DropDownListFor(m => m.selectedValue, 
   new SelectList(Model.List, 
    "Id", "Text", 
    new {multiple="multiple"} )

Bootstrap多选不起作用

TodoList.js： -

2 个答案: