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

    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();
            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 %
            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>';
            flag = 1;
<select id="emp" name="emp">
    <option value=""></option>
    <option value="1">1</option>

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

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


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.


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

$('#empid').on('change',function() {
<script src=""></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>
<br />
Hold CTRL / CMD for selecting multiple fields

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

var data=[];
var $el=$("#my-select");

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

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

It works for me :)

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

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

        // use array "selections" here.. 

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

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>
     <input type="submit"/> 

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


Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow