JavaScript drop downs with multiple selected Values?

Question

First of all I'm very new to java script.And I'm developing in my web application and I have a drop down menu where list of persons are included. Using that I know how to pass the selected value of a one person.But how can I select multiple values (names of persons) and send that data to the back end implementation.Is that possible using select tag? Thank you very much!

<select class="studentList" id="dropDown1">
    <option value="1">Joseph</option>
    <option value="2">Rick</option>
    <option value="3">john</option>
</select>

script code

var drop = document.getElementById("dropDown1");
var selectedPerson = drop.options[drop.selectedIndex].text;

Answer 1

Try to use multiple attribute in <select> tag.

try this below code,

HTML

<select class="studentList" id="dropDown1" multiple>
    <option value="1">Joseph</option>
    <option value="2">Rick</option>
    <option value="3">john</option>
</select>

JS

$('#dropDown1').change(function () {
        alert($(this).val());
});

SEE THIS DEMO

NOTE: It will return selected values in array.

UPDATE:

If you want to change this view like default select , there are lot of plug-ins available in jquery.

But this is the basic idea for select multiple option using <select>

Answer 2

Use HTML multiple Attribute http://www.w3schools.com/tags/att_select_multiple.asp .

But if you can use bootstrap to your application this is not a hard task. Bootstrap is good front end framework.

http://getbootstrap.com/

http://silviomoreto.github.io/bootstrap-select/ project provides dropdowns with the ability of multiple selections .what you have to do is to add selectpicker in the class and multiple as a atribute.

<select class="selectpicker studentList" id="dropDown1" multiple title='Choose one of the following...'>
      <option value="1">Joseph</option>
      <option value="2">Rick</option>
      <option value="3">john</option>
 </select>

Please read the documentation and find out more

Answer 3

Why you can not use jQuery, you can small effort to get this selected value. try this both way,

Check this Demo jsFiddle

HTML

<select name="select[]" class="studentList" multiple="multiple" id="dropDown1">
    <option value="1">Joseph</option>
    <option value="2" selected="selected">Rick</option>
    <option value="3" selected="selected">john</option>
</select>

JQuery

arr = $("#dropDown1").val()
alert(arr);

---

Check this Demo jsFiddle

HTML

<select name="select[]" multiple="multiple" id="select">
    <option value="1">Joseph</option>
    <option value="2" selected="selected">Rick</option>
    <option value="3" selected="selected">john</option>
<input type="button" id="btn" value="click me" />

JQuery

$('#btn').click(function(){
    $('#select option:selected').each(function(){
        alert($(this).text());
    });
})

Hope this help