Set Selected Indexes to Multi Select Using Javascript

Question

I am not sure why this does not work, and I will really need help! And yes, I looked at this

I am trying to set several options in the selected element as selected, using an array containing the values ​​I want to select, and interaction through the array and parameters in the select element. Please find the code below:

// value is the array. for (var j = 0; j < value.length; j++) { for (var i = 0; i < el.length; i++) { if (el[i].text == value[j]) { el[i].selected = true; alert("option should be selected"); } } } 

After completing these cycles, nothing is selected, even if a warning () is triggered.

Any ideas are welcome!

thanks

CM

PS (not sure what happened with code formatting).

EDIT: full function

  if (CheckVariableIsArray(value) == true) { if (value.length > 1) { // Multiple selections are made, not just a sinle one. var checkBoxEl = document.getElementById(cbxElement); checkBoxEl.checked = "checked"; checkBoxEl.onchange(); // Call function to change element to a multi select document.getElementById(element).onchange(); // Repopulates elements with a new option list. for (var j = 0; j < value.length; j++) { for (var i = 0; i < el.length; i++) { if (el[i].text === value[j]) { el[i].selected = true; i = el.length + 1; } } } //document.getElementById(element).onchange(); } } else { for (var i = 0; i < el.length; i++) { if (el[i].innerHTML == value) { el.selectedIndex = i; document.getElementById(element).onchange(); } } } 

Answer 1

It works for me. Are you setting the value of el and the value correctly? And are you sure you want to look at each innerHTML option instead of the value attribute?

See jsFiddle .

---

HTML:

 <select id="pick_me" multiple="multiple"> <option>Hello</option> <option>Hello</option> <option>Foo</option> <option>Bar</option> </select> 

JS:

 var value = ['Foo', 'Bar'], el = document.getElementById("pick_me"); // value is the array. for (var j = 0; j < value.length; j++) { for (var i = 0; i < el.length; i++) { if (el[i].innerHTML == value[j]) { el[i].selected = true; //alert("option should be selected"); } } } 

Answer 2

Well, first of all, you have to set the select select html control property, something like this: <select multiple = "multiple"> ... </select> ", and then you can use the javascript SetMultiSelect function (defined below) to html control installation:

 function SetMultiSelect(multiSltCtrl, values) { //here, the 1th param multiSltCtrl is a html select control or its jquery object, and the 2th param values is an array var $sltObj = $(multiSltCtrl) || multiSltCtrl; var opts = $sltObj[0].options; // for (var i = 0; i < opts.length; i++) { opts[i].selected = false;//don't miss this sentence for (var j = 0; j < values.length; j++) { if (opts[i].value == values[j]) { opts[i].selected = true; break; } } } $sltObj.multiselect("refresh");//don't forget to refresh! } $(document).ready(function(){ SetMultiSelect($sltCourse,[0,1,2,3]); }); 

Answer 3

I ran into this question and was not satisfied with the answers. Here is a generic, non-jQuery version. It uses Array.indexOf where possible, but returns to the foreach loop if it is not available.

Pass a node to the function along with an array of values. Throws an exception if an invalid element is passed to it. To do this, use === to check the value. For the most part, make sure you compare the value of the parameter with an array of strings.

eg. selectValues( document.getElementById( 'my_select_field' ), [ '1', '2', '3'] );

 var selectValues = (function() { var inArray = ( function() { var returnFn; if( typeof Array.prototype.indexOf === "function" ) { returnFn = function(option, values) { return values.indexOf( option.value ) !== -1; }; } else { returnFn = function(option, values) { var i; for( i = 0; i < values.length; i += 1 ) { if( values[ i ] === option.value ) { return true; } } return false; } } return returnFn; }() ); return function selectValues(elem, values) { var i, option; if( typeof elem !== "object" || typeof elem.nodeType === "undefined" ) throw 'selectValues() expects a DOM Node as it\ first parameter, ' + ( typeof elem ) + ' given.'; if( typeof elem.options === "undefined" ) throw 'selectValues() expects a <select> node with options as it\ first parameter.'; for( i = 0; i < elem.options.length; i += 1 ) { option = elem.options[ i ]; option.selected = inArray( option, values ); } } }());