Twitter Bootstrap Question posted in

I need a dropdownlist with checkboxes in asp.net mvc without EF-Twitter bootstrap

I need a dropdownlist with checkboxes in asp.net mvc.
Now my view already has a Layout page which already contains few script files.
Now according to me the script files that im using are somewhere disturbing the original layout or vice versa

I have already tried possible solutions to change the script files ,arrange them in some other way.commenting single ones and see what changes that they make,etc

My dropdown list :

@Html.DropDownListFor(m => m.CompanyId,(IEnumerable<SelectListItem>)ViewBag.cmpName, new { @id = "drpdown", @class = "listbox" ,@multiselect="multiselect"})

Included files :

<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 src="http://code.jquery.com/jquery-1.5.js"></script>

And javascript :

<script type="text/javascript">
    $(function () {
        $('#drpdown').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

i expected dropdown with checkboxes but i didnt get any checkboxes : 1

I want something like this :
2

Tags:

2

Answers


  1. 0

    You can see the example which I coded, Your code didn’t work due to not properly imported the plugins,

    • First you have to import jquery library and bootstrap library before your multiselect plugin

    I hope this example will help to you.

     $(function () {
      $('#drpdown').multiselect({
          includeSelectAllOption: true
      });
 });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

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

<select id="drpdown" multiple="multiple">
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
    Login or Signup to reply.
  2. 0

    Just remove this

    <script src="http://code.jquery.com/jquery-1.5.js"></script>

    this override the working jquery plugin

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search