JavaScript: получить значение выпадающего списка

Question

У меня есть 3 комбинированных/выпадающих HTML-кода. Все они имеют четкое имя и идентификатор. На конкретном событии я хочу получить значение всех трех из них. Может ли кто-нибудь дать мне фрагмент кода для этого?

Answer 1

с помощью JQuery:

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

Answer 2

Используйте рамки, как JQuery упоминалось выше, или просто сделать это старый школьный путь. document.getElementById('dropdownId').value.

Answer 3

Чтобы сделать это не с помощью 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; 
} 

Эта функция возвращает массив значений, которые соответствуют id s вы передаете в функцию, а именно:

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

Если <select> с одним из ваших указанных id s не существует, массив содержит null для значения для этой позиции.

Есть несколько других способов сделать это, вы могли бы передать функции массив id значений: getSelectValues([ 'id1', 'id2', 'id3' ]), в этом случае функция будет изменена:

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

Вы также могли бы пройти функцию карта id с и заполнить значения:

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

Это изменение функции будет:

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; 
     } 
    } 
} 

Answer 4

Я бы попытался установить их рядом друг с другом в вашем HTML, а затем повторить их с помощью встроенного метода jQuery. Вы бы создать свои элементы, как это:

<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> 

Затем в сценарии:

var dropdownValues; 

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