Geselecteerde waarde in vervolgkeuzelijst ophalen met JavaScript

var e = document.getElementById("ddlViewBy");
function show(){
  var as = document.forms[0].ddlViewBy.value;
  var strUser = e.options[e.selectedIndex].value;
  console.log(as, strUser);
}
e.onchange=show;
show();

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

Antwoord 1, autoriteit 100%

Als je een geselecteerd element hebt dat er als volgt uitziet:

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

Deze code uitvoeren:

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

Zou strUser2maken. Als je eigenlijk test2wilt, doe dan dit:

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

Waardoor strUsertest2

wordt

Antwoord 2, autoriteit 13%

Gewoon 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'
}];

Antwoord 3, autoriteit 6%

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

Dit is correct en zou u de waarde moeten geven.
Is dit de tekst die je zoekt?

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

Dus je bent duidelijk over de terminologie:

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

Deze optie heeft:

• Index = 0
• Waarde = hallo
• Tekst = Hallo wereld

Antwoord 4, autoriteit 2%

De volgende code toont verschillende voorbeelden met betrekking tot het verkrijgen/plaatsen van waarden uit invoer-/selectievelden met behulp van JavaScript.

Bronlink

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

Het volgende script haalt de waarde van de geselecteerde optie op en plaatst deze in tekstvak 1

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

Het volgende script haalt een waarde uit een tekstvak 2 en waarschuwt met zijn waarde

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

Het volgende script roept een functie aan vanuit een functie

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

Antwoord 5

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

Antwoord 6

Als u ooit code tegenkomt die puur voor Internet Explorer is geschreven, ziet u mogelijk dit:

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

Als u het bovenstaande in Firefox et al uitvoert, krijgt u de foutmelding ‘is geen functie’, omdat u met Internet Explorer weg kunt komen met () in plaats van []:

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

De juiste manier is om vierkante haken te gebruiken.

Antwoord 7

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

Elk invoer-/formulierveld kan een “this”-sleutelwoord gebruiken wanneer u het vanuit het element opent. Dit elimineert de noodzaak om een formulier in de dom-boom te lokaliseren en vervolgens dit element in het formulier te lokaliseren.

Antwoord 8

Er zijn twee manieren om dit voor elkaar te krijgen met JavaScript of jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.

OF

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'

Antwoord 9

Beginners willen waarschijnlijk toegang tot waarden van een select met het NAME-attribuut in plaats van het ID-attribuut. We weten dat alle formulierelementen namen nodig hebben, zelfs voordat ze id’s krijgen.

Dus ik voeg de oplossing getElementsByName()toe, zodat nieuwe ontwikkelaars het ook kunnen zien.

NB. namen voor formulierelementen moeten uniek zijn om uw formulier bruikbaar te maken als het eenmaal is gepost, maar de DOM kan toestaan dat een naam door meer dan één element wordt gedeeld. Overweeg daarom indien mogelijk ID’s aan formulieren toe te voegen, of wees expliciet met formulierelementnamen my_nth_select_named_xen my_nth_text_input_named_y.

Voorbeeld met getElementsByName:

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

Antwoord 10

Gebruik gewoon

• $('#SelectBoxId option:selected').text();voor het verkrijgen van de tekst zoals vermeld

• $('#SelectBoxId').val();voor het verkrijgen van de geselecteerde indexwaarde

Antwoord 11

De eerdere antwoorden laten nog ruimte voor verbetering vanwege de mogelijkheden, de intuïtiviteit van de code en het gebruik van idversus name. Men kan een uitlezing krijgen van drie gegevens van een geselecteerde optie — het indexnummer, de waarde en de tekst. Deze eenvoudige, cross-browser code doet alle drie:

<!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,uitvoer.

idmoet worden gebruikt voor make-updoeleinden. Voor functionele vormdoeleinden is namenog steeds geldig, ook in HTML5, en moet nog steeds worden gebruikt. Let ten slotte op het gebruik van vierkante versus ronde haakjes op bepaalde plaatsen. Zoals eerder uitgelegd, accepteren alleen (oudere versies van) Internet Explorer overal ronde versies.

Antwoord 12

JQuery gebruiken:

$('select').val();

Antwoord 13

Een andere oplossing is:

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

Antwoord 14

De eenvoudigste manier om dit te doen is:

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

Antwoord 15

Lopend voorbeeld van hoe het werkt:

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>

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>

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

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

var x = document.form1.list.value;

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>

ddlViewBy.value                      // value
ddlViewBy.selectedOptions[0].text    // label

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

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

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

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