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;

what about multiple attribute of select tag?

CJ Ramki
– CJ Ramki

2014-03-19 10:41:54 +00:00
Commented Mar 19, 2014 at 10:41 — CJ Ramki
– CJ Ramki, Commented Mar 19, 2014 at 10:41
@CJ Ramki - Oops..I didn't catch it..thanks buddy

user3437130
– user3437130

2014-03-19 10:47:29 +00:00
Commented Mar 19, 2014 at 10:47 — user3437130
– user3437130, Commented Mar 19, 2014 at 10:47
i posted my answer below...

CJ Ramki
– CJ Ramki

2014-03-19 10:52:43 +00:00
Commented Mar 19, 2014 at 10:52 — CJ Ramki
– CJ Ramki, Commented Mar 19, 2014 at 10:52

CJ Ramki · Accepted Answer · 2014-03-20 11:03:41Z

4

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>

edited Mar 20, 2014 at 11:03

answered Mar 19, 2014 at 10:49

CJ Ramki

2,6323 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T.J. Crowder Over a year ago

Yes, but if you give multiple, it will no longer be a "drop down" as the OP said it was supposed to be.

CJ Ramki Over a year ago

@T.J.Crowder I thought, he wants to get the basic idea to do this. Any way, I update my answer according to your comment. :)

Amila Iddamalgoda · Accepted Answer · 2014-03-19 10:43:54Z

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

enter image description here

edited Mar 19, 2014 at 10:43

answered Mar 19, 2014 at 10:36

Amila Iddamalgoda

4,31612 gold badges52 silver badges86 bronze badges

3 Comments

user3437130 Over a year ago

Thanks! This one is more intersting :) I should look more for this

Jaykumar Patel Over a year ago

this answer is not related to a question. only for reputation purpose not put this kind outside answer. put your own effort. hope you understand positively.

Amila Iddamalgoda Over a year ago

But it's explain the same scenario related to the title " drop downs with multiple selected Value".right ? but things bit spice up in bootstrap.Hope the new guy learned something :)

Jaykumar Patel · Accepted Answer · 2014-03-19 10:50:48Z

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

Collectives™ on Stack Overflow

JavaScript drop downs with multiple selected Values?

3 Answers 3

2 Comments

3 Comments

HTML

JQuery

HTML

JQuery

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

HTML

JQuery

HTML

JQuery

Comments

Your Answer

Sign up or log in

Post as a guest

Related