How to get multiple values from a select option in javascript?

Question

I want to get all data based from my code i can only get one on myFunction . How to get multiple values from a select option in javascript?. I used jquery plugin in selecting multiple data from a selection option but I am having troublem in getting all the data when i generate. I want all the data from the select box to be printed or logged .But as on the screenshot there were multiple values but when generated but only 1 data that was generated which is #10Recovery

#select menu
<select id="mySelect2" class="chosen" multiple="true">
          {% for product in products.response.result %}
          <option value="{{ product.item_name }}">{{ product.item_name }}</option>
          {% endfor %}
</select>

#jquery plugin in getting multiple values from a menu
 </script>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
 <script>
        jQuery(document).ready(function(){
            jQuery(".chosen").data("placeholder","Select Products").chosen();
        });
 </script>



#script in getting values from select option
    <script>
    function myFunction() {
        var z = document.getElementById("mySelect2").value;
        document.getElementById("demo2").innerHTML = z;
    }

    But as on the screenshot there were multiple values but when generated only 1 data that
    was generated which is #10Recovery
    #code on generating
<a class="button" onclick="myFunction()">{% trans 'Generate' %}</a>

Answer 1

You may use jQuery.

jQuery("#mySelect2").val();