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

Próbowałem poniżej metod, ale wszyscy zwracają wybrany indeks zamiast wartości:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
2091
Fire Hand 6 lipiec 2009, 11:25

23 odpowiedzi

Najlepsza odpowiedź

Jeśli masz wybrany element, który wygląda tak:

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

Zrobiłby strUser be 2. Jeśli właściwie chcesz, to test2, a następnie to:

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

Który zrobiłby strUser be test2

3146
DevLoverUmar 19 październik 2020, 15:20

Oto linia kodu JavaScript:

var x = document.form1.list.value;

Zakładając, że menu rozwijane o nazwie Lista name="list" i zawarta w formularzu z nazwą atrybutem name="form1".

3
Peter Mortensen 21 maj 2017, 11:06
var strUser = e.options[e.selectedIndex].value;

Jest to poprawne i powinno dać wartość. Czy to tekst jesteś?

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

Więc jesteś jasny na terminologii:

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

Ta opcja ma:

  • Indeks = 0.
  • Value = Hello.
  • Tekst = Hello World
179
Greg 6 lipiec 2009, 07:29

Poniższy kod wykazuje różne przykłady związane z uzyskaniem / umieszczenia wartości z pól wejściowych / wybierz za pomocą JavaScript.

Link źródłowy

Praca JavaScript & AMP; Demo jQuery

enter image description here

enter image description here

 <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()">

Następujący skrypt otrzymuje wartość wybranej opcji i wprowadzenie go w polu tekstowym 1

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

Poniższy skrypt otrzymuje wartość z pola tekstowego 2 i ostrzeżenie o jego wartości

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

Następujący 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>
64
Code Spy 18 listopad 2019, 06:10
var selectedValue = document.getElementById("ddlViewBy").value;
45
Bucket 25 październik 2013, 13:46

Jeśli kiedykolwiek biegniesz przez kod napisany wyłącznie dla programu Internet Explorer, możesz to zobaczyć:

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

Uruchamianie powyższego w Firefox et al da Ci błąd "nie jest błędem", ponieważ program Internet Explorer umożliwia uciec z użyciem () zamiast []:

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

Właściwy sposób jest użycie wsporników kwadratowych.

23
Peter Mortensen 10 lipiec 2019, 14:07
<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>

Wszelkie pole wejścia / formularza może użyć "tego" słowa kluczowego, gdy uzyskasz dostęp do tego z elementu. Eliminuje to potrzebę lokalizacji formularza na drzewie Dom, a następnie zlokalizowanie tego elementu wewnątrz formularza.

19
boateng 10 lipiec 2019, 14:50

Istnieją dwa sposoby, aby to zrobić 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'
16
Peter Mortensen 10 lipiec 2019, 14:19

Początkujący prawdopodobnie będą chcieli uzyskać dostęp do wartości z wybranej za pomocą atrybutu nazw, a nie atrybutu ID. Znamy wszystkie elementy formularzy potrzebują nazw, nawet zanim zdobędą identyfikatory.

Więc dodam rozwiązanie getElementByName() tylko dla nowych programistów, aby zobaczyć.

NB. Nazwy elementów formularzy będą musiały być unikalne, aby Twój formularz był użyteczny, ale dom może pozwolić na nazwę być udostępnianą przez więcej niż jednego elementu. Z tego powodu rozważ dodanie identyfikatorów do formularzy, jeśli możesz, lub być jawnym z nazwami elementów formularzowych my_nth_select_named_x i my_nth_text_input_named_y.

Przykład przy użyciu getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
14
Nandula Perera 24 grudzień 2020, 23:31

Po prostu użyj

  • $('#SelectBoxId option:selected').text(); W celu uzyskania tekstu

  • $('#SelectBoxId').val(); Aby uzyskać wybraną wartość indeksu

12
Peter Mortensen 6 czerwiec 2014, 14:24

Poprzednie odpowiedzi nadal pozostawiają miejsce na poprawę ze względu na możliwości, intuicyjność kodu i użycie id versus name. Można uzyskać odczyt z trzech danych wybranej opcji - numer indeksu, jego wartości i jej tekst. Ten prosty kod przeglądarki wykonuje wszystkie trzy:

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

Live Demo: http://jsbin.com/jiwena/1/edit?htmloutput.

id powinien być używany do celów makijażu. W przypadku celów formularzy funkcjonalnej, name jest nadal ważna, również w HTML5 i powinna być nadal używana. Wreszcie pamiętaj o użyciu kwadratowych wsporników w określonych miejscach. Jak wyjaśniono wcześniej, tylko (starsze wersje) programu Internet Explorer przyjmie okrągłe we wszystkich miejscach.

9
Peter Mortensen 10 lipiec 2019, 14:11

Korzystanie z jQuery:

$('select').val();
8
Félix Gagnon-Grenier 10 czerwiec 2019, 12:39

Innym rozwiązaniem jest:

document.getElementById('elementId').selectedOptions[0].value
7
Peter Mortensen 10 lipiec 2019, 14:17

Biegliwy przykład tego, jak działa:

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ę, gdy zostanie zmieniona, jeśli potrzebujesz tej funkcji, należy wdrożyć zmianę OnClick.

6
Ani Menon 2 sierpień 2017, 13:19

Możesz użyć querySelector.

np.

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

var myValue = myElement.querySelector('[selected]').value;
5
Rounin 4 styczeń 2018, 22:36

Mam trochę innego widoku, jak to osiągnąć. Zwykle robię to z następującym podejściem (jest ł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>
5
Peter Mortensen 10 lipiec 2019, 14:20

Iść wraz z poprzednimi odpowiedziami, tak robię jako jedną liniową. Ma to na uzyskanie rzeczywistego tekstu wybranej opcji. Istnieją dobre przykłady, aby uzyskać już numer indeksu. (I 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żesz użyć nawiasów, ale byłoby to bardzo rzadkie.

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

Wątpię w to procesy szybsze niż dwie wersja linii. Chciałbym po prostu skonsolidować mój kod jak najwięcej.

Niestety nadal jest dwukrotnie pobierany element, który nie jest idealny. Metodę, która tylko chwyta element raz był bardziej przydatny, ale jeszcze tego nie pomyślałem, w odniesieniu do tego z jednym wierszem kodu.

5
Genko 9 styczeń 2020, 18:19

W 2015 r. W Firefox, co następuje również działa.

e. Opcje .SeurtedDex

4
Peter Mortensen 1 lipiec 2016, 01:09

Powinieneś użyć querySelector, aby to osiągnąć. Standaryzuje również sposób uzyskania wartości z elementów formularzy.

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

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

2
Pal Singh 16 styczeń 2020, 23:39

Oto łatwy sposób, aby zrobić to w funkcji Onchange:

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

1
zackify 16 kwiecień 2014, 20:52

Nie wiem, czy jestem tym, który nie otrzymuje prawa, ale to właśnie zadziałało dla mnie: za pomocą zdarzenia onchange () w 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;
}

Daje Ci to dowolną wartość na wybranej rozwijaniu

1
Olawale Oladiran 29 styczeń 2020, 13:23

Po prostu zrobić: document.getElementById('idselect').options.selectedIndex

Wtedy otrzymasz wybrać wartość indeksu, zaczynając od 0.

0
Knautiluz 22 grudzień 2018, 15:03

Próbować

ddlViewBy.value
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>
0
Kamil Kiełczewski 1 maj 2020, 10:10