Как получить выбранное значение из раскрывающегося списка в JavaScript

Ответ 1

Он отлично работает со мной.

У меня есть следующий HTML:

<div>
    <select id="select1">
        <option value="1">test1</option>
        <option value="2" selected="selected">test2</option>
        <option value="3">test3</option>
    </select>
    <br/>
    <button onClick="GetSelectedItem('select1');">Get Selected Item</button>
</div>

И следующий JavaScript:

function GetSelectedItem(el)
{
    var e = document.getElementById(el);
    var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
    alert(strSel);
}

Посмотрите, что вы используете правильный идентификатор. Если вы используете его с ASP.NET, идентификатор изменяется при визуализации.

Ответ 2

Прямой value должен работать нормально:

var sv = sel.value;
alert(sv);

Единственная причина, по которой ваш код может выйти из строя, - это когда нет выбранного элемента, тогда selectedIndex возвращает -1 и код прерывается.

Ответ 3

Надеюсь, что это сработает для вас.

 function GetSelectedItem()
 {
     var index = document.getElementById(select1).selectedIndex;

     alert("value =" + document.getElementById(select1).value); // show selected value
     alert("text =" + document.getElementById(select1).options[index].text); // show selected text 
 }

Ответ 4

Я бы сказал, измените var sv = sel.options [sel.selectedIndex].value; to var sv = sel.options [sel.selectedIndex].text;

Это сработало для меня. Направляя вас туда, где я нашел свое решение Получение раскрывающегося списка выбранного значения jstl

Ответ 5

Вот простой пример, чтобы получить выбранное значение раскрывающегося списка в javascript

Сначала мы создаем пользовательский интерфейс для выпадающего меню

<div class="col-xs-12">
<select class="form-control" id="language">
    <option>---SELECT---</option>
    <option>JAVA</option>
    <option>C</option>
    <option>C++</option>
    <option>PERL</option>
</select>

Затем нам нужно написать script, чтобы получить выделенный элемент

<script type="text/javascript">
$(document).ready(function () {
    $('#language').change(function () {
        var doc = document.getElementById("language");
        alert("You selected " + doc.options[doc.selectedIndex].value);
    });
});

Теперь При изменении выпадающего меню выбранный элемент будет предупрежден.

Ответ 6

В соответствии с спецификациями Html5 вы должны использовать -  element.options [e.selectedIndex]. текст

например. если у вас есть поле выбора, как показано ниже:

<select id="selectbox1">
    <option value="1">First</option>
    <option value="2" selected="selected">Second</option>
    <option value="3">Third</option>
</select>
<br/>
<button onClick="GetItemValue('selectbox1');">Get Item</button>

вы можете получить значение, используя следующий script:

<script>
 function GetItemValue(q) {
   var e = document.getElementById(q);
   var selValue = e.options[e.selectedIndex].text ;
   alert("Selected Value: "+selValue);
 }
</script>

Пробовал и тестировал.