Отримайте вибране значення у спадному списку за допомогою JavaScript

Як отримати вибране значення зі спадного списку за допомогою JavaScript?

Я спробував наведені нижче методи, але всі вони повертають вибраний індекс замість значення:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Якщо у вас є елемент вибору, який виглядає приблизно так:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Запуск цього коду:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Зробив strUserби 2. Якщо ви насправді бажаєте test2, то зробіть це:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

Який би strUserбутиtest2

Простий JavaScript:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;

Це правильно і повинно дати вам значення. Це текст, який ви шукаєте?

var strUser = e.options[e.selectedIndex].text;

Отже, ви зрозуміли термінологію:

<select>
    <option value="hello">Hello World</option>
</select>

Цей параметр має:

• Індекс = 0
• Значення = привіт
• Текст = Hello World

У наведеному нижче коді представлені різні приклади, пов'язані з отриманням / введенням значень із полів введення / вибору за допомогою JavaScript.

Посилання на джерело

Робоча демонстрація JavaScript та jQuery

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

Наведений нижче сценарій отримує значення вибраного параметра та вводить його у текстове поле 1

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

Наступний сценарій отримує значення з текстового поля 2 та попереджає його значення

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

Наступний скрипт викликає функцію з функції

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

Якщо ви коли-небудь стикаєтесь з кодом, написаним виключно для Internet Explorer, ви можете побачити таке:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

Якщо запустити вищезазначене у Firefox та ін, ви отримаєте помилку "не функція", оскільки Internet Explorer дозволяє відмовитися від використання () замість []:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Правильний спосіб - використовувати квадратні дужки.

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Будь-яке поле введення / форми може використовувати ключове слово "це", коли ви отримуєте доступ до нього зсередини елемента. Це виключає необхідність розміщення форми на дереві купола, а потім розміщення цього елемента всередині форми.

Початківці, швидше за все, хочуть отримати доступ до значень із вибраного з атрибутом NAME, а не атрибутом ID. Ми знаємо, що всі елементи форми потребують імен, навіть перш ніж вони отримують ідентифікатори.

Отже, я додаю getElementByName()рішення просто для того, щоб побачити і нових розробників.

NB. імена елементів форми повинні бути унікальними для того, щоб ваша форма стала використовуватись після опублікування, але DOM може дозволити спільне використання імені більш ніж одним елементом. З цієї причини розгляньте можливість додавання ідентифікаторів до форм, якщо ви можете або бути явними з іменами елементів форми my_nth_select_named_xта my_nth_text_input_named_y.

Приклад з використанням getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Є два способи зробити це за допомогою JavaScript або jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

АБО

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Просто використовуйте

• $('#SelectBoxId option:selected').text(); для отримання тексту, як перераховано

• $('#SelectBoxId').val(); для отримання вибраного значення індексу

Попередні відповіді все ще залишають місце для вдосконалення через можливості, інтуїтивність коду та використання idversus name. Можна прочитати три дані вибраного варіанту - його індексний номер, його значення та текст. Цей простий код з перехресним браузером робить усі три:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

Демонстраційна демонстрація: http://jsbin.com/jiwena/1/edit?html,output .

idслід використовувати для макіяжу. У цілях функціональної форми nameвсе ще діє, також у HTML5, і його слід використовувати. Нарешті, майте на увазі використання квадратних та круглих дужок у певних місцях. Як було пояснено раніше, лише (старіші версії) Internet Explorer приймають круглі в усіх місцях.

Використання jQuery:

$('select').val();

Ще одне рішення:

document.getElementById('elementId').selectedOptions[0].value

Приклад прикладу того, як це працює:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

Примітка. Значення не змінюються в міру зміни спадного меню, якщо вам потрібна ця функціональність, тоді потрібно здійснити зміну onClick.

Можна використовувати querySelector.

Напр

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

У мене трохи інший погляд на те, як цього досягти. Я зазвичай роблю це з наступним підходом (це простіший спосіб і наскільки я знаю, працює з кожним браузером):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

У 2015 році у Firefox працює також наступне.

е. параметри .selectedIndex

Щоб іти разом з попередніми відповідями, це я так роблю як однолінійний. Це для отримання фактичного тексту вибраного параметра. Є хороші приклади для отримання індексу вже. (А для тексту я просто хотів показати це)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

У деяких рідкісних випадках вам може знадобитися використання дужок, але це буде дуже рідко.

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

Я сумніваюся, що це відбувається швидше, ніж дворядкова версія. Мені просто подобається максимально закріпити свій код.

На жаль, це все ще отримує елемент двічі, що не ідеально. Метод, який захоплює елемент лише один раз, був би більш корисним, але я цього ще не зрозумів, що стосується цього за допомогою одного рядка коду.

Ось рядок коду JavaScript:

var x = document.form1.list.value;

Якщо припустимо, що випадаюче меню названо списком name="list"і включене у форму з атрибутом імені name="form1".

Ви повинні використовувати це querySelectorдля досягнення. Це також стандартизує спосіб отримання значення з елементів форми.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Fiddle: https://jsfiddle.net/3t80pubr/

Я не знаю, чи є я тим, хто не відповідає правильному питанню, але це просто працювало для мене: Використання події onchange () у вашому html, наприклад.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// javascript

function sele(){
    var strUser = numberToSelect.value;
}

Це дасть вам будь-яке значення у спадному меню вибору за клік

Найпростіший спосіб зробити це:

var value = document.getElementById("selectId").value;

Ось простий спосіб зробити це у функції onchange:

event.target.options[event.target.selectedIndex].dataset.name

Просто зробіть: document.getElementById('idselect').options.selectedIndex

Тоді ви отримаєте значення вибору індексу, починаючи з 0.

Спробуйте

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

Створіть спадне меню з кількома параметрами (скільки завгодно!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

Я зробив трохи веселим. Ось фрагмент коду:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

так, фрагмент спрацював