Javascript jQuery Set Values Selection in a multiple Select

Question

I have a multiple select    lt select name  strings  id  strings  multiple style  width 100px   gt       lt option value  Test  gt Test lt  option gt       lt option value  Prof  gt Prof lt  option gt       lt option value  Live  gt Live lt  option gt       lt option value  Off  gt Off lt  option gt       lt option value  On  gt On lt  option gt   lt  select gt    I load data from my database  Then I have a string like this   var values  Test Prof Off     How can I set this Values in the multiple select  Already tried change the string in an array and put it as value in the multiple  but doesnt work     Can someone help me with this  THANKS

User · Answer

this is error in some answers for replace |

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

this correction is correct but the | In the end it should look like this \|

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);

User · Answer

Pure JavaScript ES6 solution    Catch every option with a querySelectorAll function and split the values string  Use Array forEach to iterate over every element from the values array  Use Array find to find the option matching given value  Set it s selected attribute to true    Note  Array from transforms an array-like object into an array and then you are able to use Array prototype functions on it  like find or map    x000D   x000D  var values    Test Prof Off   x000D      options   Array from document querySelectorAll   strings option     x000D   x000D  values split      forEach function v    x000D    options find c   gt  c value    v  selected   true  x000D      x000D   lt select name  strings  id  strings  multiple style  width 100px   gt  x000D       lt option value  Test  gt Test lt  option gt  x000D       lt option value  Prof  gt Prof lt  option gt  x000D       lt option value  Live  gt Live lt  option gt  x000D       lt option value  Off  gt Off lt  option gt  x000D       lt option value  On  gt On lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Pure JavaScript ES5 solution  For some reason you don t use jQuery nor ES6  This might help you    x000D   x000D  var values    Test Prof Off   x000D  var splitValues   values split       x000D  var multi   document getElementById  strings    x000D   x000D  multi value   null     Reset pre-selected options  just in case  x000D  var multiLen   multi options length  x000D  for  var i   0  i  lt  multiLen  i      x000D    if  splitValues indexOf multi options i  value   gt   0    x000D      multi options i  selected   true  x000D      x000D    x000D   lt select name  strings  id  strings  multiple style  width 100px   gt  x000D       lt option value  Test  gt Test lt  option gt  x000D       lt option value  Prof  gt Prof lt  option gt  x000D       lt option value  Live  gt Live lt  option gt  x000D       lt option value  Off  gt Off lt  option gt  x000D       lt option value  On  selected gt On lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Basically do a values split      and then loop through the resulting array and set the Select

User · Answer

Iterate through the loop using the value in a dynamic selector that utilizes the attribute selector   var values  Test Prof Off     each values split       function i e           strings option value      e         prop  selected   true         Working Example http   jsfiddle net McddQ 1

User · Answer

Just provide the jQuery val function with an array of values   var values    Test Prof Off       strings   val values split          And to get the selected values in the same format   values       strings   val

User · Answer

var groups     Test    Prof   Off             fruits option   filter function           return groups indexOf   this  text     gt  -1    Options text exists in array        prop  selected   true     Set selected

User · Answer

in jQuery       strings   val   Test    Prof    Off       or in pure JavaScript   var element   document getElementById  strings    var values     Test    Prof    Off    for  var i   0  i  lt  element options length  i          element options i  selected   values indexOf element options i  value   gt   0      jQuery does significant abstraction here

[javascript] Javascript/jQuery: Set Values (Selection) in a multiple Select

Examples related to javascript

Examples related to jquery

Examples related to multiple-select