[javascript] Get value of multiselect box using jQuery or pure JS

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;">

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

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

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

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

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

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

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

It works for me :)

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 ;)

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);