CODEWITHSUNDEEP
javascriptjquery
ramu
ramu

Reputation: 563

Option add in multiselect box using bootstrap-multiselect

On my loading page I am trying to add options to a multi select box, but when I append to the select box it's not added.

$(document).ready(function() {
  var masterobj = [{
    "employee_name": "headthree",
    "employee_id": "203"
  }];

  $('#ddlPermission').multiselect({
    buttonWidth: '100%',
    maxHeight: 100,
    includeSelectAllOption: true,
    dropRight: true
  });
  
  $(".clickbutton").click(function() {
    $('#ddlPermission').val(['A', 'B']);
    $('#ddlPermission').multiselect("refresh");
  });

  $.each(masterobj, function(key, value) {
    $('.multiselect')
      .append($("<option></option>")
        .attr("value", value.employee_id)
        .text(value.employee_name));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2">
      <input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
    </div>
  </div><br>
  <select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
  <option value="201">headone</option>
  <option value="202">headtwo</option>
</select>
  <input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active myfunction" value="Submit">
</div>

FIDDLE

I need to append the options to the multiselect box while loading the page.

Upvotes: 1

Views: 1983

Answers (2)

Sanyami Vaidya
Sanyami Vaidya

Reputation: 809

You can try this,

$('#ddlPermission').multiselect('refresh');

See this fiddle in action: https://jsfiddle.net/kxbbtgwL/3/

Upvotes: 0

Pedram
Pedram

Reputation: 16585

Here you go, your problem is you should append data before initialize multiselect

// bootstrap multiselect box
$(document).ready(function() {

var masterobj = [{"employee_name":"headthree","employee_id":"203"}];

   $.each(masterobj, function(key, value) {   
     $('.multiselect')
         .append($("<option></option>")
                    .attr("value",value.employee_id)
                    .text(value.employee_name)); 
});

  $('#ddlPermission').multiselect({
    buttonWidth : '100%',
    maxHeight : 100,
    includeSelectAllOption : true,
    dropRight : true
  });  
 $(".clickbutton").click(function(){	
  	$('#ddlPermission').val(['A','B']);
        $('#ddlPermission').multiselect("refresh");
  });
 
});
/*
     $(".myfunction").click(function(){	
     var allVal=$("#ddlPermission").val();
  alert(allVal);
  return false;
   
   });
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />

<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
  <option value="201">headone</option>
  <option value="202">headtwo</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit"  class="button active myfunction" value="Submit">
</div>

Working Demo

Upvotes: 1

Related Questions