html - JavaScript: get value of dropdown - Stack Overflow

admin管理员组

文章数量:1323323

I have 3 HTML bo/drop down boxes. All of them have a distinct name and id. On a particular event I want to get the value of all three of them. Can any one give me a code snippet for that?

I have 3 HTML bo/drop down boxes. All of them have a distinct name and id. On a particular event I want to get the value of all three of them. Can any one give me a code snippet for that?

• javascript
• html
• drop-down-menu
• getelementbyid
• html-select

Share Follow edited Jul 29, 2012 at 8:29 Mat 207k4141 gold badges402402 silver badges417417 bronze badges asked Sep 23, 2009 at 8:41 user156073user156073 2,01188 gold badges3232 silver badges3737 bronze badges 4

• 2 Do you know about "Accept" button in every answer you get on your question? – Kamarey Commented Sep 23, 2009 at 8:51
• plz tell me how to accpt the answer.I can see only met button. Many people have asked me to accpet the answe.But i dont know how to accpet.Where is the option – user156073 Commented Sep 23, 2009 at 9:04
• In every answer on your question, just below the number of votes, there is a "v" like sign. Choose the answer you most like and press this "v" sign. – Kamarey Commented Sep 23, 2009 at 9:08
• It's actually a checkmark, not a V :) – nickytonline Commented Sep 30, 2009 at 15:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

using jQuery:

$("#dropdownID").val(); 

I'd try to set them up next to each other in your HTML and then iterate through them using jQuery's built-in each() method. You'd set up your elements like this:

<div id="dropdownBoxes">
<select id="firstElement">
    <option>cool</option>
    <option>neat</option>
</select>
<select id="secondElement">
    <option>fun</option>
    <option>awesome</option>
</select>
<select id="thirdElement">
    <option>great</option>
    <option>synonym</option>
</select>
</div>

<input type="button" id="theTrigger">Push me!</input>

Then, in your script:

var dropdownValues;

$("#theTrigger").click(function(){    
dropdownValues.length=0;
$("#dropdownBoxes select").each(function(){
    dropdownValues.push($(this).val());
    });
});

To do this not using jQuery:

function getSelectValues() {
    var values = [];
    for (var i = 0; i < arguments.length; i++) {
        var select = document.getElementById(arguments[i]);
        if (select) {
            values[i] = select.options[select.selectedIndex].value;
        } else {
            values[i] = null;
        }
    }
    return values;
}

This function returns an array of values that correspond to the ids you pass into the function, as follows:

var selectValues = getSelectValues('id1', 'id2', 'id3');

If a <select> with one of your specified ids does not exist the array contains null for the value for that position.

There are a couple of other ways to do this, you could pass the function an array of id values: getSelectValues([ 'id1', 'id2', 'id3' ]), in which case the function would be changed:

function getSelectValues(ids) {
    var values = [];
    for (var i = 0; i < ids.length; i++) {
    // ...

You could also pass the function a map of ids and populate the values:

var myMap = { 'id1': null, 'id2': null, 'id3': null };
getSelectValues(myMap);
// myMap['id1'] contains the value for id1, etc

This would change the function to be:

function getSelectValues(map) {
    for (var id in map) {
        var select = document.getElementById(id);
        if (select) {
            map[id] = select.options[select.selectedIndex].value;
        } else {
            map[id] = null;
        }
    }
}

Use a framework like jQuery mentioned above or just do it the old school way. document.getElementById('dropdownId').value .

本文标签： htmlJavaScript get value of dropdownStack Overflow