How to select multiple value from a listbox

Question

I have a below code where if I select one value, it works fine, but now I need such that when I select multiple values from the listbox, i have to get the value of selected values. How do i go about it? Here is the code,

HTML Code:

<select id="attributeNames" name="attributeNames" size="5" multiple="multiple"         
onchange="getUniqueValues(value)">
<option value="Apple"> Apple </option>
<option value="Mango"> Mango </option>
<option value="Orange"> Orange </option>
<option value="Banana"> Banana </option>                                            
</select>

JavaScript:

function getUniqueValues(value){
alert(value);
}

For instance: If I select Apple, then I get alert saying apple, now if I select apple & mango, I have to get the alert having apple & mango values. Facing problem here.

Here is the code: http://jsfiddle.net/5VtE3/2/

Thanks in advance,

possible duplicate stackoverflow.com/questions/5330030/…

Sibu
– Sibu

2013-01-04 06:14:29 +00:00
Commented Jan 4, 2013 at 6:14 — Sibu
– Sibu, Commented Jan 4, 2013 at 6:14

MD Sayem Ahmed · Accepted Answer · 2013-01-04 06:15:20Z

2

Here is an example on how to do it -

HTML -

<select id="attributeNames" name="attributeNames" size="5" multiple="multiple">
    <option value="Apple"> Apple </option>
    <option value="Mango"> Mango </option>
    <option value="Orange"> Orange </option>
    <option value="Banana"> Banana </option>                                            
</select>

JS -

window.onload = function () {
    var listbox = document.getElementById('attributeNames');
    listbox.onchange = function () {
        for(var index = 0; index < this.children.length; index++) {        
            if (this.children[index].selected) {
                console.log(this.children[index].value);
            }            
        }
    };
};

Live Demo.

edited Jan 4, 2013 at 6:15

answered Jan 4, 2013 at 6:09

MD Sayem Ahmed

29.3k27 gold badges115 silver badges183 bronze badges

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

Comments

davneetnarang · Accepted Answer · 2013-01-04 06:14:11Z

2

If you dont mind using jquery, -

function getUniqueValues(){  
    var k=0;  
    var selected_list = {};  
    $('#attributeNames option').is(':selected').each(function(){  
        selected_list[k++] = $(this).val();  
        });  
    alert(selected_list);  
    }

OR

function getrUniqueValues(){  
    $('#attributeNames option').is(':selected').each(function(){  
        alert($(this).val());  
        });  
    }

answered Jan 4, 2013 at 6:14

davneetnarang

4461 gold badge5 silver badges15 bronze badges

4 Comments

MD Sayem Ahmed Over a year ago

@karaxuna: and so many times we forget that jQuery is not JavaScript :-)

karaxuna Over a year ago

@SayemAhmed but we should consider that jQuery IS JavaScript :D

MD Sayem Ahmed Over a year ago

@karaxuna: I think we should consider jQuery as a framework that changed the way we used to use JavaScript in web pages, not JavaScript :-).

karaxuna Over a year ago

@SayemAhmed I've just joked. I know that when question is not tagged with jQuery, people don't want it (or don't know about it's existance). Anyway I think that jQuery alternative solutions are always good to see

Slackware · Accepted Answer · 2013-01-04 06:08:30Z

0

You might want to try checkboxes

<input type="checkbox" name="fruit" value="apple">Apple<br/>
<input type="checkbox" name="fruit" value="banana">Banana

Or you should just try to make:

<select id="attributeNames" name="attributeNames" size="5" multiple="multiple" onChange="getUniqueValues()" >
  <option value="Apple"> Apple </option>
  <option value="Mango"> Mango </option>
  <option value="Orange"> Orange </option>                                           
</select>

function getUniqueValues(){
var values = this;
}

answered Jan 4, 2013 at 6:08

Slackware

1,0001 gold badge13 silver badges33 bronze badges

Comments

karaxuna · Accepted Answer · 2013-01-04 06:14:09Z

0

Try this:

<select id="attributeNames" onchange="getUniqueValues.call(this)" name="attributeNames" size="5" multiple="multiple">
    <option value="Apple"> Apple </option>
    <option value="Mango"> Mango </option>
    <option value="Orange"> Orange </option>
    <option value="Banana"> Banana </option>                                
</select>

function getUniqueValues(){
    for(var i = 0; i < this.options.length; i++){
        if(this.options[i].selected)
            alert(this.options[i].value);
    }
}

jsfiddle: http://jsfiddle.net/5VtE3/7/

answered Jan 4, 2013 at 6:14

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Comments

Nachiket · Accepted Answer · 2015-12-15 06:30:17Z

0

function getValue(id) {
                    var retval = "";
                    var lstdatabase = document.getElementById(id);
                    for (var i = 0; i < lstdatabase.options.length; i++) {
                        if (lstdatabase.options[i].selected) {
                            if (retval == "") {
                                retval = lstdatabase.options[i].value;
                            }
                            else {
                                retval = retval + ',' + lstdatabase.options[i].value;
                            }
                        }
                    }
                    return retval;
                }

answered Dec 15, 2015 at 6:30

Nachiket

5905 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to select multiple value from a listbox

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related