0

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">
kp987987
  • 21
  • 5

1 Answers1

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">
Mohamed-Yousef
  • 23,946
  • 3
  • 19
  • 28