'Select items in multiselect dropdown list MVC3 jquery

How can i set values in a multiselect dropdownlist using jquery.I am using MVC3 Razor view to display the multiselect dropdown and using http://quasipartikel.at/multiselect_next/ this multiselect plugin.

 <div class="editor-field">         
   @Html.DropDownListFor(model => model.ActionId, (SelectList)ViewBag.ActionsList, new { @class = "multiselect", @multiple = "multiple", @style = "width: 450px;height:300px" })
    @Html.ValidationMessageFor(model => model.ActionId)   
</div>
<button onclick="setValues()">Set values </button>

In javascript i used the code

function setValues() {      
    var valArr = [2, 3, 5];
    var i = 0, size = valArr.length;
    var  $options = $('#ActionId option');
    for (i; i < size; i++) {           
        // $("#ActionId option[value='" + valArr[i] + "']").attr("selected", 1); this is also not working
        $("#ActionId option[value='" + valArr[i] + "']").attr("selected", true);
    }     
}

But the values are not getting selected on the click event of button. When i refresh the page , the values are getting selected. How can i overcome this ? i want to set the values in multdropdown list on button click using javascript

jqueryasp.net-mvc-3razorhtml-select


Solution 1:[1]

You are suppose to provide field name whose value will be bind by Razor engine to dropdownlist for that you need to provide the property name that you want to bind in dropdown. Try this out 

@Html.DropDownListFor(model => model.ActionId, new SelectList(@ViewBag.ActionsList,"AccountID","AccountName"), new { @class = "multiselect", @multiple = "multiple", @style = "width: 450px;height:300px" })

where AccountId,AccountName is the property field inside ActionsList and AccountName values will be show in page and AccountId will be bind on select

In your case check ActionsList and put property name that exist in place of AccountId and AccountName

Solution 2:[2]

You can use choosen js to do multiselect functionaily.

Please refer this documentation with demo.

http://harvesthq.github.io/chosen/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 C M

Related Questions