Javascript/Jquery: Set Values (Selection) in a Multiple Select

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

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/

How to set multiple select values from string using Jquery

try this code. You just missing trim() that texts and put splitted array as val()

var test = $.trim($("#test").text());
var testArray = test.split(',');
$('#multipleSelect').val(testArray);

Set values in jquery multiselect dropdown

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.

How to Set Selected value in Multi-Value Select in Jquery-Select2.?

Well actually your only need $.each to get all values, it will help you jsfiddle.net/NdQbw/5

<div class="divright">
            <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
                <option value=" ">No illustrations</option>
                <option value="a" selected>Illustrations</option>
                <option value="b">Maps</option>
                <option value="c" selected>selectedPortraits</option>
            </select>
    </div>

<div class="divright">
        <select id="drp_Books_Ill_Illustrations1" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
            <option value=" ">No illustrations</option>
            <option value="a">Illustrations</option>
            <option value="b">Maps</option>
            <option value="c">selectedPortraits</option>
        </select>
</div>

<button class="getValue">Get Value</button>
<button  class="setValue"> Set  value </button>

<div class="divright">
        <select id="drp_Books_Ill_Illustrations2" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
            <option value=" ">No illustrations</option>
            <option value="a" selected>Illustrations</option>
            <option value="b">Maps</option>
            <option value="c" selected>selectedPortraits</option>
        </select>
</div>

<div class="divright">
        <select id="drp_Books_Ill_Illustrations3" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
            <option value=" ">No illustrations</option>
            <option value="a">Illustrations</option>
            <option value="b">Maps</option>
            <option value="c">selectedPortraits</option>
        </select>
</div>

<button class="getValue1">Get Value</button>
<button  class="setValue1"> Set  value </button>

The script:

 var selectedValues = new Array();
    selectedValues[0] = "a";
    selectedValues[1] = "c";

$(".getValue").click(function() {
    alert($(".leaderMultiSelctdropdown").val());
});
$(".setValue").click(function() {
   $(".Books_Illustrations").val(selectedValues);
});

$('#drp_Books_Ill_Illustrations2, #drp_Books_Ill_Illustrations3').select2();

$(".getValue1").click(function() {
    alert($(".leaderMultiSelctdropdown").val());
});

$(".setValue1").click(function() {
    //You need a id for set values
    $.each($(".Books_Illustrations"), function(){
            $(this).select2('val', selectedValues);
    });
});

jQuery multiple select change event can't get option values in order of selection

If I understood you correctly this may help:

Target options directly with click event and save them in order in array.
With e.target.selected ? you make sure push is made on selected only.
remove function will remove element from array if deselected.

var str = []
$('select#brands option').on("click", function(e) {
  let l = $(e.target).parent().find("option:selected").length
  console.clear()

  if (l > 1) {
    e.target.selected ? str.push(e.target.value) : remove(str, e.target.value);
  } else if (l === 1 && str.length != 2) {
    str = [e.target.value]
  } else if (l === 1 && str.length === 2) {
    remove(str, e.target.value)
  } else if (l === 0) {
    str = []
  }

  console.log(str)
});

function remove(str, item) {
  var index = str.indexOf(item);
  if (index !== -1) {
    str.splice(index, 1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="brands[]" class="chosen selectbrands fixed-width-xl" id="brands" multiple="multiple">
  <option value="1">BASTIEN test1</option>
  <option value="2">BASTIEN test2</option>
  <option value="3">BASTIEN test3</option>
  <option value="4">BASTIEN test4</option>
</select>

multiple select boxes, get selected values using jquery

jQuery .each() does not return a string as you seem to expect... But is returning jQuery... Read, the collection of the select.dd1 elements.

You should declare an array in the updateCustomers function... Then use .each() to loop the elements, then return a string made of the array elements joined with comas...

function UpdateCustomers() {
  var getStatesUpdated = [];
  $("select.dd1").each(function (i) {
    var $this = $(this);
    if ($this.val() !== "0") {
      getStatesUpdated.push($this.val())
    }
  });
  return getStatesUpdated.join(",")
}

$("button").click(function(){
  console.log(UpdateCustomers());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>

<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>

<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>

<button>Log selected</button>

How to get multiple select box values using jQuery?

jQuery .val()

  var foo = $('#multiple').val(); 

How to set selected value in multiple select list

You should set values correct. As of now you are passing the text not values.

var groups=[1,3];

var groups=[1,3];$('#fruits').val(groups); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="fruits" name="fruits" multiple="multiple">    <option value="1">Apple</option>    <option value="2">Mango</option>    <option value="3">Orange</option> </select>

Set selected option to multiple select jquery

try this jquery Code:-

 $("select").each(function(i, sel) {
     $(sel).find("option:eq(" + i + ")").attr('selected', 'selected');
 });

in above example you don't need array...

working example:-http://jsfiddle.net/L7S37/12/

and if still you want to use your own code then use below given code...

code:-

var indexDropDown = ["A","B","C"];
for (var i = 0; i < indexDropDown.length; i++) {
    $("#dropdown"+indexDropDown[i]).find("option[val="+(i+1)+"]").attr('selected','selected');
}   

see the working example:-

http://jsfiddle.net/L7S37/7/

---

Related Topics