jquery - Bootstrap 多选不工作

Question

我在 asp.net mvc 程序中包含了 Bootstrap 库文件(字体、js、css)，并尝试执行多选下拉程序，但它不起作用。请帮忙。我正在附加代码。下面的代码包含 html 代码和我试图通过在 html 文件中调用 TodoList.js 来执行的 jquery 代码。

@{
    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 中调用的函数的定义，因此必须首先加载它。