CODEWITHSUNDEEP
javascriptjqueryarrayshtml-select
Mohammad J
Mohammad J

Reputation: 136

How to insert multi select dropdown value into a var by jquery or javascript?

I want to insert multi select dropdown value to a var by jquery or javascript. for example:

<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

<script>    
//var tlds = ['info', 'com', 'net', 'org', 'co', 'biz'];    
var tlds = [multi select value goes here like above comment!];

tlds.forEach(function(tld) {
    //some work
});
</script>

any help? Thank you

Upvotes: 1

Views: 3260

Answers (6)

prasanth
prasanth

Reputation: 22500

Try with map().get() method for create the array from element .Each time you change the selection array was created depend on the selected value.

$('select').change(function(){
var res = $(this).children('option:selected').map(function(){
 return $(this).val()
}).get()
console.log(res)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

Upvotes: 1

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

Iterate over the option and push the values in a array. 

var tlds = [];
$("#tld > option:selected").each(function(){
   tlds.push(this.value);
});
console.log(tlds);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir" selected="">.ir</option>
    <option value="net" selected="">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

Upvotes: 1

Hitmands
Hitmands

Reputation: 14179

May this help you:

var tlds = (function(select) {
  var res = [];
  
  select.addEventListener('change', function(event) {
    var values = Array
    .prototype
    .map
    .call(event.target.selectedOptions, function(a) {
      return a.value;
    })
    ;
    
    var old = res.slice();
    res.length = 0;
    res.push.apply(res, values);
    res.onValuesChange && res.onValuesChange(event, old, res);
  });
  
  return res;
})(document.getElementById('tld'));

tlds.onValuesChange = function(event, oldValues, newValues) {
  console.log({oldValues, newValues});
}
<select id="tld" multiple>
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

Upvotes: 1

Sajal
Sajal

Reputation: 4401

Call onChange function every time an option is selected or unselected and push the selected values to the tlds array.

//var tlds = ['info', 'com', 'net', 'org', 'co', 'biz'];    
var tlds = [];

function selectTld() {
  tlds = [];
  var vals = $('#tld').val();
  tlds.push(vals);
  $("#selectedValues").html(tlds);
}

tlds.forEach(function(tld) {
  //some work
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple" onChange="selectTld()">
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

<div id="selectedValues"></div>

Upvotes: 1

Dennis Jansen
Dennis Jansen

Reputation: 3

You can use this for javascript to get the value from the elementId:

var e = document.getElementById("tld");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

And then proceed with a loop, looping through all the options and adding it all to an array.

Upvotes: 0

Gokhan Kurt
Gokhan Kurt

Reputation: 8277

jQuery val() function returns an array when executed on a multiselect dropdown. 

  
var tlds = $("#tld").val();
console.log(tlds);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir" selected="">.ir</option>
    <option value="net" selected="">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

Upvotes: 1

Related Questions