CODEWITHSUNDEEP
jqueryhtmlasp.net-mvctwitter-bootstrap
Baji
Baji

Reputation: 131

Bootstrap multi select is not working

I have included bootstrap libraries files(fonts,js,css) in asp.net mvc program and tried to execute program for multi select drop down and it is not working. please help. I am attaching code.The below code contains html code and jquery code which I am trying to execute by calling TodoList.js in the html file.

@{
    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();
});

Upvotes: 2

Views: 5613

Answers (2)

Deepak
Deepak

Reputation: 119

add attributes multiple="multiple"

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

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29693

Keep/include your ToDoList.js at the end as below:

<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-->

Since bootstrap-multiselect.js file contains definition for the function called in ToDoList.js and it has to be loaded first.

Upvotes: 1

Related Questions