How change the dropdown values dynamically

Question

HI I am using davidstutz bootstrap-multiselect plugin,i want to update the values of department dropdown based on Client dropdown value

following is he code for Client Dropdown (C# ASP.Net Format)

@Html.DropDownList("ClientID", null, "Select Client", new { @class = "form-control",@required="required" })

Code for Department dropdown

<select id="Agents[0].Departments" name="Agents[0].Departments" class="form-control AgentDepartments" multiple>
                                            </select>

Initially i am applying the plugin and on client change i am re assigning the plugin but it is not updating the department dropdown values

Jquery Code

$(function () {   
  $('.AgentDepartments').multiselect({
    includeSelectAllOption: true,
    height: '20px'
  });

  $("#ClientID").on('change',function () {
    var CIN = $('option:selected', this).text();

    $.ajax({
      type: "get",
      url: '/Client/GetDepartmentList',
      contentType: "application/json; charset=utf-8",
      data: { "CIN": CIN },
      datatype: "json",
      success: function (data) {
        $('.AgentDepartments').empty();
        $.each(data, function () {
          $(".AgentDepartments").append($("<option/>").val(this.KeyName).text(this.ValueName));
        });

        $('.AgentDepartments').multiselect({
          includeSelectAllOption: true,
          height: '20px'
        });
      },

      error: function () {
        alert("Failed to load Data.");
        toastr.warning('Something went wrong!', null, { "closeButton": true });
      },

      beforeSend: function () {
        $('#loadingDiv').show();
      },

      complete: function () {}
    });
  });
});

score 0 · Answer 1 · answered Nov 21 '17 at 08:03

I think, you first need to destroy and then reinitialize after changing/appending the options:

$(".AgentDepartments").append(toAppend).multiselect("destroy").multiselect();

Alternatively, I think, you can also:

$(".AgentDepartments").append(toAppend).multiselect('refresh');

score 0 · Accepted Answer · answered Nov 21 '17 at 08:06

0

Instead of doing this

$('.AgentDepartments').multiselect({
   includeSelectAllOption: true,
    height: '20px'
});

Try Rebuilding the dropdown

$('.AgentDepartments').multiselect('rebuild')

answered Nov 21 '17 at 08:06

How change the dropdown values dynamically

2 Answers2