Get value of multiselect box using jQuery or pure JS

Question

In the code shown below, how to get the values of multiselect box in function val() using jQuery or pure JavaScript?

<script>
    function val() {
        //Get values of mutliselect drop down box
    }

    $(document).ready(function () {
        var flag = 0;
        $('#emp').change(function () {
            var sub = $("OPTION:selected", this).val()
            if (flag == 1) $('#new_row').remove();
            $('#topics').val('');
            var html = '<tr id="new_row" class="new_row"><td>Topics:</td><td>  <select    id="topic_l" name="topic_l" class="topic_l" multiple="multiple">';
            var idarr = new Array();
            var valarr = new Array(); { %
                for top in dict.tops %
            }
            idarr.push('{{top.is}}');
            valarr.push('{{pic.ele}}'); { % endfor %
            }
            for (var i = 0; i < idarr.length; i++) {
                if (sub == idarr[i]) {
                    html += '<option value="' + idarr[i] + '" >' + valarr[i] + '</option>';
                }
            }
            html += '</select></p></td></tr>';
            $('#tops').append(html);
            flag = 1;
        });
    });
</script>
Emp:&nbsp;&nbsp;&nbsp;&nbsp;
<select id="emp" name="emp">
    <option value=""></option>
    <option value="1">1</option>
</select>

<div name="tops" id="tops"></div>

<input type="submit" value="Create Template" id="create" onclick="javascript:var ret=val();return ret;">

This doc is like a holy grail for select and jquery. comp345.awardspace.com/select_element_cheatsheet.pdf — A G
– A G, Commented Mar 30, 2010 at 7:05

prodigitalson · Accepted Answer · 2010-03-30 06:58:21Z

125

the val function called from the select will return an array if its a multiple. $('select#my_multiselect').val() will return an array of the values for the selected options - you dont need to loop through and get them yourself.

answered Mar 30, 2010 at 6:58

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hulk Over a year ago

The multiselect box is dynamically generated as u can see ,so when i say alert($('select#my_multiselect').val()); it says undefined....

prodigitalson Over a year ago

Just for clarification that was an example selector - you would need to figure out what selector to used based on your dom/markup.

fboes · Accepted Answer · 2016-04-21 16:01:20Z

26

I think the answer may be easier to understand like this:

$('#empid').on('change',function() {
  alert($(this).val());
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="empid" name="empname" multiple="multiple">
  <option value="0">Potato</option>
  <option value="1">Carrot</option>
  <option value="2">Apple</option>
  <option value="3">Raisins</option>
  <option value="4">Peanut</option>
</select>
<br />
Hold CTRL / CMD for selecting multiple fields

If you select "Carrot" and "Raisins" in the list, the output will be "1,3".

edited Apr 21, 2016 at 16:01

fboes

2,27918 silver badges17 bronze badges

answered Sep 13, 2012 at 19:46

Etdashou

5,1851 gold badge19 silver badges15 bronze badges

Comments

ByteHamster · Accepted Answer · 2015-04-27 13:02:09Z

12

var data=[];
var $el=$("#my-select");
$el.find('option:selected').each(function(){
    data.push({value:$(this).val(),text:$(this).text()});
});
console.log(data)

edited Apr 27, 2015 at 13:02

ByteHamster

4,9619 gold badges41 silver badges56 bronze badges

answered Apr 27, 2015 at 12:29

aykut aydoğan

3274 silver badges9 bronze badges

1 Comment

aykut aydoğan Over a year ago

this code is get selected value and text then push to array

notMyName · Accepted Answer · 2014-11-19 13:30:41Z

2

This got me the value and text of the selected options for the jQuery multiselect.js plugin:

$("#selectBox").multiSelect({
    afterSelect: function(){
        var selections = [];
        $("#selectBox option:selected").each(function(){
            var optionValue = $(this).val();
            var optionText = $(this).text();
            console.log("optionText",optionText);                
            // collect all values
            selections.push(optionValue);
        });

        // use array "selections" here.. 
    }
});

very usefull if you need it for your "onChange" event ;)

edited Nov 19, 2014 at 13:30

answered Nov 19, 2014 at 13:02

notMyName

6855 silver badges3 bronze badges

Comments

Yulian · Accepted Answer · 2014-09-12 12:45:51Z

1

According to the widget's page, it should be:

var myDropDownListValues = $("#myDropDownList").multiselect("getChecked").map(function()
{
    return this.value;    
}).get();

It works for me :)

answered Sep 12, 2014 at 12:45

Yulian

6,84911 gold badges73 silver badges103 bronze badges

Comments

Du-Lacoste · Accepted Answer · 2016-08-16 10:56:08Z

You could do like this too.

<form action="ResultsDulith.php" id="intermediate" name="inputMachine[]" multiple="multiple" method="post">
    <select id="selectDuration" name="selectDuration[]" multiple="multiple"> 
        <option value="1 WEEK" >Last 1 Week</option>
        <option value="2 WEEK" >Last 2 Week </option>
        <option value="3 WEEK" >Last 3 Week</option>
         <option value="4 WEEK" >Last 4 Week</option>
          <option value="5 WEEK" >Last 5 Week</option>
           <option value="6 WEEK" >Last 6 Week</option>
    </select>
     <input type="submit"/> 
</form>

Then take the multiple selection from following PHP code below. It print the selected multiple values accordingly.

$shift=$_POST['selectDuration'];

print_r($shift);

Collectives™ on Stack Overflow

Get value of multiselect box using jQuery or pure JS

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related