Set values in jquery multiselect dropdown

Question

I want to set the multiple ITEMS in jQuery multiselect dropdown depending on the VALUE of that item, which I'm getting from database, separated by ",".

I'm saving this fetched data in hidden field.

Ex.

Hidden field: hdnLots = 64,65 , Items for lot No.: 64 = Lot 1, 65 = Lot2

So when I get the hdnLot=65, then in jQuery Multiselect dropdown only Lot2 needed to be selected. And same for 64,65. i.e. When multiple values are selected than all those values needed to seleted.

I've tried: JQuery multiselect - Set a value as selected in the multiselect dropdown

Code I've wrote for this is:

if ($("#<%= btnUpdateProject.ClientId %>").css('display') == "inline-block") 
{
   debugger;
   var dataarray = document.getElementById('<%= hdnLots.ClientId %>').value.split(",");
   $("#<%= ddlNoOfLots.clientid %>").val(dataarray);
}

Acidfast

Add ` $("#<%= ddlNoOfLots.clientid %>").refresh();` – Makeweight

add $("#<%= ddlNoOfLots.clientid %>").multiselect("refresh"); – Correlate

$("#<%= ddlNoOfLots.clientid %>").multiselect("refresh"); – Gurias

@Makeweight : Its showing error. – Acidfast

@user3085495 what error? – Gurias

@Correlate : I've tried it, but its changing size(height,width) of multiselect and neither its working. – Acidfast

@Makeweight : Uncaught type error: Object [object object] has no method refresh. – Acidfast

Sorry but $("#<%= ddlNoOfLots.clientid %>").multiselect('refresh'); is the right syntax. Also have you checked what is the value of the dataarray var – Makeweight

Can you reproduce the problem on a demo? – Correlate

@Makeweight : It's showing only the single data in dataarray. i.e. dataarray = 65 only, even if hdnLots=64,65. – Acidfast

@Dharmang: I'll try for that, but I don't think so I can do that because I'm new to this. – Acidfast

You need use third party service like jsfiddle to demonstrate your code in js and html language, if you don't know already. – Correlate

Try alerting document.getElementById('<%= hdnLots.ClientId %>').value and see what it holds – Makeweight

@Dharmang: Somehow I managed to reach upto refresh method but its still showing this error: Uncaught Error: Cannot call methods on multiselect prior to initialization, attempt to call method 'refresh' in console. – Acidfast

This error means that your multiselect instance is not initialized. first initialize it by calling $("#<%= ddlNoOfLots.clientid %>").multiselect(); provide any options if necessary. – Correlate

Answer 1

I hope this will help you:

Demo

$(document).ready(function() {
$("select").multiselect({
   selectedText: "# of # selected"
});
var hidValue = $("#hidSelectedOptions").val();
alert(hidValue);
var selectedOptions = hidValue.split(",");
for(var i in selectedOptions) {
    var optionVal = selectedOptions[i];
    $("select").find("option[value="+optionVal+"]").prop("selected", "selected");
}
$("select").multiselect('reload');
});

EDIT

refresh has been removed from latest jQuery-MultiSelect. Using reload will solve the question now.

Correlate

Answer 2

The one thing you would need to ensure is that the values in the array are strings:

<select id='multipleSelect' multiple='multiple'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<script type='text/javascript'>
    $('#multipleSelect').val(['1', '2']);
</script>

Check my Fiddle: https://jsfiddle.net/luthrayatin/jaLygLzo/

Rugby

I'm glad I could help mate! – Rugby

Answer 3

var selectedOptions = hidValue.split(",");
typeof (selectedOptions != 'undefined' && $("#hidSelectedOptions").multiselect('select', selectedOptions));

Chibcha

.multiselect('select', selectedOptions)); this part works great for me. – Jimmiejimmy