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

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;

To jest poprawne i powinno dać ci wartość. Chodzi Ci o SMS?

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

Więc masz jasność co do terminologii:

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

Ta opcja ma:

• Index = 0
• Value = hello
• Text = Hello World

Poniższy kod pokazuje różne przykłady związane z pobieraniem / umieszczaniem wartości z pól input/select przy użyciu JavaScript.

Link Źródłowy

Praca Javascript & Jquery Demo

 <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 oraz alarmowanie z jego 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 Internet Explorera, możesz zobaczyć to:

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

Uruchomienie powyższego w Firefoksie i in. spowoduje błąd "nie jest funkcją", ponieważ Internet Explorer pozwala uniknąć użycia () zamiast []:

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

Poprawnym 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 input/form może używać słowa kluczowego "this", gdy uzyskujesz do niego dostęp z wnętrza elementu. Eliminuje to konieczność lokalizowania formularza w drzewie dom, a następnie umieszczania tego elementu wewnątrz formularza.

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'

Początkujący mogą chcieć uzyskać dostęp do wartości z select z atrybutem NAME, a nie ID. Wiemy, że wszystkie elementy formularza potrzebują nazw, nawet zanim otrzymają identyfikatory.

Więc dodaję rozwiązanie getElementsByName() tylko dla nowych programistów, aby zobaczyć też.

NB. nazwy elementów formularza muszą być unikalne, aby formularz mógł być użyteczny po opublikowaniu, ale DOM może zezwolić na współdzielenie nazwy przez więcej niż jeden element. Z tego powodu rozważ dodanie identyfikatorów do formularzy, jeśli możesz, lub bądź jawny z nazwami elementów formularza my_nth_select_named_x i my_nth_text_input_named_y.

Przykład użycia getElementsByName:

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

Po prostu użyj

• $('#SelectBoxId option:selected').text(); aby uzyskać tekst jak na liście

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

Poprzednie odpowiedzi wciąż pozostawiają miejsce na poprawę ze względu na możliwości, intuicyjność kodu i użycie id versus name. Można odczytać trzy dane wybranej opcji-jej numer indeksu, jej wartość i tekst. Ten prosty, między przeglądarkowy kod robi 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?html, output .

id powinny być używane do celów makijażu. Dla celów funkcjonalnych, name jest nadal ważne, również w HTML5 i nadal powinny być używane. Na koniec należy pamiętać o stosowaniu nawiasów kwadratowych i okrągłych w niektórych miejscach. Jak wyjaśniono wcześniej, tylko (starsze wersje) Internet Explorer będzie akceptować okrągłe we wszystkich miejscach.

Using jQuery:

$('select').val();

Innym rozwiązaniem jest:

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

Przykład 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ą listy rozwijanej, jeśli potrzebujesz tej funkcjonalności, należy zaimplementować zmianę onClick.

Możesz użyć querySelector.

Np.

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

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

Mam nieco inny pogląd na to, jak to osiągnąć. Zazwyczaj robię to z następującym podejściem (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>

Aby przejść do poprzednich odpowiedzi, tak to robię jako jednolinijkowy. Ma to na celu uzyskanie rzeczywistego tekstu wybranej opcji. Istnieją dobre przykłady na uzyskanie 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;

Niestety to wciąż pobiera element dwa razy, co nie jest idealne. Metoda, która chwyta element tylko raz, byłaby bardziej przydatna, ale jeszcze tego nie rozgryzłem, jeśli chodzi o robienie tego za pomocą jednej linii kodu.

Najprostszym sposobem na to jest:

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

W 2015 roku, w Firefox, działa również następujące działanie.

E.Opcje .selectedIndex

Oto linia kodu JavaScript:

var x = document.form1.list.value;

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

Powinieneś używać querySelector, aby to osiągnąć. To również standaryzuje sposób uzyskiwania wartości z elementów formularza.

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

Https://jsfiddle.net/3t80pubr/

W bardziej nowoczesnych przeglądarkach, querySelector pozwala nam pobrać wybraną opcję w jednym poleceniu, używając :checked pseudo-Klasa . Z wybranej opcji możemy zebrać wszystkie potrzebne nam informacje:

const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");

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

Oto prosty sposób, aby to zrobić w funkcji onchange:

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

Nie wiem, czy to ja nie rozumiem pytania, ale to po prostu zadziałało na mnie: Używanie 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;
}

To da ci dowolną wartość z rozwijanego menu wybierz za kliknięcie

Myślę, że możesz dołączyć detektor zdarzeń do samego znacznika select np:

<script>
  document.addEventListener("DOMContentLoaded", (_) => {
    document.querySelector("select").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
  });
</script>

W tym scenariuszu, należy upewnić się, że masz atrybut value dla wszystkich opcji, i nie są one null.

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

Następnie otrzymasz wartość indeksu select, zaczynając od 0.

Try

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

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

Yay the snippet worked