Uzyskaj wybraną wartość z listy rozwijanej za pomocą JavaScript

Jak uzyskać wybraną wartość z listy rozwijanej za pomocą JavaScript?

Wypróbowałem poniższe metody, ale wszystkie zwracają wybrany indeks zamiast wartości:

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

Jeśli masz element select, który wygląda następująco:

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

Uruchamianie tego kodu:

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

Stałaby strUsersię 2. Jeśli tak naprawdę chcesz test2, zrób to:

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

Co by strUserbyłotest2

Zwykły 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;

Jest to poprawne i powinno dać ci wartość. Czy to ten tekst, którego szukasz?

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

Więc masz jasną terminologię:

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

Ta opcja ma:

• Indeks = 0
• Wartość = cześć
• Text = Hello World

Poniższy kod przedstawia różne przykłady związane z uzyskiwaniem / wprowadzaniem wartości z pól wejściowych / zaznaczających za pomocą JavaScript.

Link źródłowy

Działająca wersja JavaScript i 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()">

Poniższy skrypt pobiera wartość wybranej opcji i umieszcza ją w polu tekstowym 1

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

Poniższy skrypt pobiera wartość z pola tekstowego 2 i ostrzega o jej wartości

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

Poniższy skrypt wywołuje funkcję z funkcji

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

Jeśli kiedykolwiek natkniesz się na kod napisany wyłącznie dla programu Internet Explorer, możesz zobaczyć:

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

Uruchomienie powyższego w przeglądarce Firefox i in. Spowoduje wyświetlenie błędu „nie jest funkcją”, ponieważ program Internet Explorer pozwala na uniknięcie używania () zamiast []:

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

Prawidłowym sposobem jest użycie nawiasów kwadratowych.

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

Każde pole wejściowe / formularza może używać słowa kluczowego „this”, gdy uzyskujesz do niego dostęp z wnętrza elementu. Eliminuje to potrzebę lokalizowania formularza w drzewie dom, a następnie lokalizowania tego elementu wewnątrz formularza.

Początkujący prawdopodobnie będą chcieli uzyskiwać dostęp do wartości z zaznaczenia za pomocą atrybutu NAZWA, a nie atrybutu ID. Wiemy, że wszystkie elementy formularza wymagają nazw, nawet zanim otrzymają identyfikatory.

Dodam więc getElementByName()rozwiązanie tylko dla nowych programistów.

NB nazwy elementów formularza będą musiały być unikalne, aby formularz był użyteczny po opublikowaniu, ale DOM może pozwolić na współdzielenie nazwy przez więcej niż jeden element. Z tego powodu rozważ dodanie ID do formularzy, jeśli możesz, lub wyraźne nazwy elementów formularza my_nth_select_named_xi my_nth_text_input_named_y.

Przykład użycia getElementByName:

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

Są dwa sposoby, aby to zrobić albo za pomocą JavaScript lub jQuery.

JavaScript:

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

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

LUB

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'

Po prostu użyj

• $('#SelectBoxId option:selected').text(); za uzyskanie tekstu zgodnie z listą

• $('#SelectBoxId').val(); w celu uzyskania wybranej wartości indeksu

Poprzednie odpowiedzi wciąż pozostawiają pole do poprawy ze względu na możliwości, intuicyjność kodu i użycie idversus name. Można odczytać trzy dane wybranej opcji - numer indeksu, wartość i tekst. Ten prosty kod dla różnych przeglądarek wykonuje wszystkie trzy czynności:

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

Demo na żywo: http://jsbin.com/jiwena/1/edit?html,output .

idpowinien być stosowany do makijażu. Do celów funkcjonalnych namejest nadal aktualny, również w HTML5 i nadal powinien być używany. Wreszcie, pamiętaj o użyciu nawiasów kwadratowych w porównaniu do okrągłych w niektórych miejscach. Jak wyjaśniono wcześniej, tylko (starsze wersje) Internet Explorera będą akceptować okrągłe wersje we wszystkich miejscach.

Korzystanie z jQuery:

$('select').val();

Innym rozwiązaniem jest:

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

Przykładowy sposób działania:

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>

Uwaga: Wartości nie zmieniają się wraz ze zmianą menu rozwijanego, jeśli potrzebujesz tej funkcji, należy wprowadzić zmianę onClick.

Możesz użyć querySelector.

Na przykład

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

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

Mam nieco inny pogląd na to, jak to osiągnąć. Zwykle robię to w następujący sposób (jest to łatwiejszy sposób i działa z każdą przeglądarką, o ile wiem):

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

W 2015 r. W przeglądarce Firefox działa również:

mi. opcje .selectedIndex

Aby postępować zgodnie z poprzednimi odpowiedziami, robię to jako jeden wiersz. Służy do uzyskania rzeczywistego tekstu wybranej opcji. Istnieją dobre przykłady uzyskania numeru indeksu. (A dla tekstu chciałem tylko pokazać w ten sposób)

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

W niektórych rzadkich przypadkach może być konieczne użycie nawiasów, ale byłoby to bardzo rzadkie.

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

Wątpię, aby proces ten przebiegał szybciej niż wersja dwuliniowa. Po prostu lubię konsolidować mój kod tak bardzo, jak to możliwe.

Niestety nadal pobiera to element dwukrotnie, co nie jest idealne. Metoda, która chwyta element tylko raz, byłaby bardziej przydatna, ale jeszcze tego nie zorientowałem, jeśli chodzi o robienie tego z jednym wierszem kodu.

Oto linia kodu JavaScript:

var x = document.form1.list.value;

Zakładając, że rozwijane menu o nazwie lista name="list"i zawarte w formularzu z atrybutem nazwy name="form1".

Powinieneś używać tego querySelectordo osiągnięcia. To również ustandaryzuje sposób uzyskiwania wartości z elementów formularza.

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

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

Nie wiem, czy to ja nie dostaję właściwego pytania, ale to po prostu zadziałało: użycie zdarzenia onchange () w twoim pliku HTML, np.

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

To da ci dowolną wartość z wybranego menu rozwijanego na kliknięcie

Najprostszym sposobem na to jest:

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

Oto prosty sposób na zrobienie tego w funkcji onchange:

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

Po prostu zrób: document.getElementById('idselect').options.selectedIndex

Wtedy dostanę wybierz wartość indeksu, zaczynając od 0.

Próbować

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>

Stwórz menu rozwijane z kilkoma opcjami (Tyle, ile chcesz!)

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

Zrobiłem trochę zabawne. Oto fragment kodu:

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

tak, fragment kodu zadziałał