how to get multiple select dropdown values

by

I am trying to display selected multiple values in the console after clicking submit. below I have given the code that I am trying.

I need like this output in the console "Sloth Bear;Giant Panda;Asiatic Black Bear"

                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
                <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

                <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
                    <option value=""></option>
                    <option>American Black Bear</option>
                    <option>Asiatic Black Bear</option>
                    <option>Brown Bear</option>
                    <option>Giant Panda</option>
                    <option>Sloth Bear</option> 
                </select>
                <input onclick="consoleMe()" value="submit" type="button">

1 thought on “how to get multiple select dropdown values”

  1. This how it can be done .. By using.val() to get array of selected values and .join() to join them to get the expected Sloth Bear;Giant Panda;Asiatic Black Bear

    function consoleMe(){
  $('select').each(function(){
    console.log($(this).val() ? $(this).val().join(','): "NO Selection");
  });
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option> 
</select>
<select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option> 
</select>
<select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option> 
</select>
<input onclick="consoleMe()" value="submit" type="button">
    Reply

Leave a Comment