Uzyskać wybraną wartość z listy rozwijanej przy użyciu 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").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.

Working 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 i alarmuje 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 function

<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 IE, 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 "is not a function", ponieważ IE 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>

Po prostu użyj

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

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

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 getElementByName() 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 jesteś jawne z nazwami elementów formularza my_nth_select_named_x i 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;

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, {[2] } jest nadal valid, również w HTML5, i nadal powinny być używane. Na koniec pamiętaj o użyciu nawiasów kwadratowych i okrągłych w niektórych miejscach. Jak wyjaśniono wcześniej, tylko (starsze wersje) IE będą akceptować okrągłe we wszystkich miejscach.

Zobacz artykuł Wybieranie rozwijanego elementu za pomocą JavaScript lub jQuery. Wyjaśnili to na wiele sposobów używając JavaScript i jQuery.

Using jQuery:

$(‘select’).val();

Możesz użyć querySelector.

Np.

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

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

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

E.Opcje .selectedIndex

Aby przejść do powyższych 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)

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

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

Jeśli ktoś wie jak to zrobić w jednej linijce bez konieczności dwukrotnego dostania elementu, to bardzo proszę o komentarz i pokazanie mi jak. Jeszcze tego nie rozgryzłem...

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.

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

Innym rozwiązaniem jest:

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

Istnieją dwa sposoby, aby to zrobić za pomocą JavaScript lub JQuery.

JavaScript:

var getValue = document.getElementsById('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'

Jedynym powodem, dla którego widzę, że ten kod nie działa, jest to, że używasz IE7 -, i zapomniałeś podać atrybut wartości dla swoich <option>-tagów... Każda inna przeglądarka powinna przekonwertować to, co znajduje się w tagach open-close jako wartość opcji.

Mam nieco inny pogląd, 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> 

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

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