How to check an option in Jquery multi-select dropdown list?

Question

I am unable to check an option from jquery multi-select dropdown list even after being able to find the option in the multi-select list. Please advise me what I am missing. Thanks!!

//this is my multi-select dropdown<br/>
$("#ddlCountries").multiselect();

var country = "USA";

//I tried below, but it did not work    
//$("#ddlCountries").multiselect("widget").find(":checkbox[value='" + country + "']").attr("checked", true);

Response @ Bhavin: I did as per you, still not getting expected result. Please see below.

$(document).ready(function () {
    $("#ddlCountries").multiselect();
    $("#ddlCountries").multiselect('uncheckAll');
}


function ddlRole_OnChange(){
    //client object of ddlRoles combobox
    var roles = $(this).data('tComboBox');
    //selected item from ddlRoles
    var selectedRole = roles.text();

    if (selectedRole.toLowerCase() === "admin"){
        //custom yes/no dialog box (first param is Title, second param is Question, third param is callback function)
        YesNoJqueryDailogBox('Admin Configuration:', 'Need Admin Role ?', 'selectForAdminRole');       
    }  
}

function selectForAdminRole(){

    $(document).ready(function (){
        $("#ddlCountries").multiselect();
        $("#ddlCountries").multiselect('uncheckAll');
        var country = "USA";
        $("#ddlCountries").multiselect("widget").find(":checkbox[value='" + country + "']").prop('checked', true);
    }); 
}

Response @ Ziv Weissman MVC view (.cshtml)

<tr>
    <td align="left" valign="middle" width="30%">
        @if (ViewBag.Roles != null)
        {
         @(
            Html.Telerik().ComboBox().Name("ddlRole") @*server-side combobox name*@
           .BindTo((IEnumerable<SelectListItem>)ViewBag.Roles) @*server-side ddlRole binding in page load*@
           .ClientEvents(events => events.OnChange("ddlRole_OnChange")) @*server-side ddlRole change event*@
          )
        }
    </td>
 </tr>

 <tr>
     <td align="left" valign="middle" width="15%" height="40" >
        Countries <span class="mandatory">*</span>
     </td>
     <td align="left" valign="middle" width="20%" >
        @if (ViewBag.Countries != null)
        {
           @*server-side ddlCountries dropdown binding in page load*@
           @Html.DropDownList("ddlCountries", (IEnumerable<SelectListItem>)ViewBag.Countries)
        }
     </td>
 </tr>

Solved: Refreshing ddlCountries dropdown after checking the option solved the problem.

var countries= $("#ddlCountries").multiselect('uncheckAll');
countries.children('option').each(function (){

    var countryNameText = $(this).text();      
    if (countryNameText == "admin"){
            $(this).attr('selected', 'selected');            
    }
});
$("#ddlCountries").multiselect("refresh");

Thanks all of you!

Use `prop()` instead of `attr()` if you want to set the property of a checkbox : http://stackoverflow.com/questions/5874652/prop-vs-attr?answertab=votes#tab-top — Victor Levin, Dec 02 '15 at 19:38
.multiselect() plugin: jQuery MultiSelect UI Widget 1.14pre jQuery 1.4.2+ jQuery UI 1.8 widget factory — jcisood, Dec 02 '15 at 21:03
Where is the html of the ddlCountries? Did you try adding attribute select = "selected" to the options you want selected? — Ziv Weissman, Dec 02 '15 at 22:51
@ Ziv. Thanks for response ! Please see above I added the MVC View that contains ddlCountries. I need to select an option dynamically. — jcisood, Dec 03 '15 at 15:15

Suhail Keyjani · Accepted Answer · 2015-12-03T15:33:38.213

4

you must refresh multiSelect, and why you add $(document).ready inside selectForAdminRole function

       $("#ddlCountries").find("option[value=" + ce + "]").prop("selected", true)
        $("#ddlCountries").multiselect("refresh")

and you can use this

     $("#ddlCountries").val("USA");
      $("#ddlCountries").multiselect("refresh")

edited Dec 03 '15 at 15:33

answered Dec 03 '15 at 15:25

Suhail Keyjani

488
3
10

score 0 · Answer 2 · answered Dec 02 '15 at 19:43

0

If I put onload event twice or setTimeout works. I used the first option as workaround, it's ugly but works fine.

$(document).ready(function() {
   $(document).ready(function() {
      $('#id').multiselect();
   });
});

$(document).ready(function() {
  setTimeout(function() {
      $('#id').multiselect();
   }, 500);
});

jQuery: 1.8.3

Bootstrap: 3.0.3

Multiselect: 0.9.13

answered Dec 02 '15 at 19:43

Bhavin Solanki

4,740
3
26
46

Hi thanks ! I tried as per your suggestion, still not able to check an option dynamically as required. Please see above what I have in .js file. Pls let me know if I am missing something. – jcisood Dec 02 '15 at 20:55

Parth · Answer 3 · 2023-05-02T11:26:25.380

0

Its working for me you can try this

$("#Id").find("option[value=" + $(this).val() + "]").prop("selected", true);
$("#Id").multiselect();

edited May 02 '23 at 11:26

answered Feb 03 '23 at 11:11

Parth

1
3

How to check an option in Jquery multi-select dropdown list?

3 Answers3