Abrufen des Texts aus einem Dropdown-Feld

74

Dies erhält den Wert von allem, was in meinem Dropdown-Menü ausgewählt ist.

document.getElementById('newSkill').value

Ich kann jedoch nicht herausfinden, nach welcher Eigenschaft für den Text gesucht werden soll, der derzeit im Dropdown-Menü angezeigt wird. Ich habe "Text" ausprobiert und mir dann W3Schools angesehen, aber das hatte keine Antwort. Weiß hier jemand Bescheid?

Für diejenigen, die sich nicht sicher sind, ist hier der HTML-Code für ein Dropdown-Feld.

<select name="newSkill" id="newSkill">
    <option value="1">A skill</option>
    <option value="2">Another skill</option>
    <option value="3">Yet another skill</option>
</select>

— Teifion
quelle

135

Anhand Ihres Beispiel-HTML-Codes können Sie den angezeigten Text der aktuell ausgewählten Option auf folgende Weise abrufen:

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;

— Patrick McElhaney
quelle

3

Für diejenigen, die zu spät zur Party kamen, gab es mehrere Vorschläge, aber niemand bemerkte, dass sie .value sagten, wo sie .text sagen sollten, ein verwirrender Tag für uns alles, was es war.

— Teifion

13

Einfach Sie können Jquery anstelle von Javascript verwenden

$("#yourdropdownid option:selected").text();

Versuche dies.

— BOBIN JOSEPH
quelle

In der ursprünglichen Frage wird JQuery nicht erwähnt. Diejenigen von uns, die JQuery nicht verwenden, würden normalerweise Antworten bevorzugen, um nicht darauf zu verweisen, es sei denn, die Frage verweist oder markiert sie. Dies ist insbesondere dann der Fall, wenn es eine relativ präzise Lösung wie die von Patrick McElhaney gibt.

— Cazort

1

@cazort Im Gegenteil. Ich musste wissen, wie man das mit JQuery macht, und diese Antwort lieferte mir das, was ich wissen musste. Daher war es für Bobin Joseph sehr nützlich (und gut), sie als Antwort aufzunehmen.

— Broken Man

8

Dies sollte den Textwert des ausgewählten Werts zurückgeben

var vSkill = document.getElementById('newSkill');

var vSkillText = vSkill.options[vSkill.selectedIndex].innerHTML;

alert(vSkillText);

Requisiten: @Tanerax für das Lesen der Frage, das Wissen, was gestellt wurde, und das Beantworten, bevor andere es herausfanden.

Edit: DownModed, weil ich tatsächlich eine Frage vollständig gelesen und beantwortet habe, traurige Welt ist es.

— Tanerax
quelle

7

document.getElementById('newSkill').options[document.getElementById('newSkill').selectedIndex].value

Sollte arbeiten

— Thejesh GN
quelle

2

Das OP will die .text-Eigenschaft anstelle von .value

— ninjaPixel

4

Das funktioniert, ich habe es selbst versucht. Ich dachte, ich poste es hier, falls jemand es braucht ...

document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text;

— Lilith
quelle

2

Fügt der Auswahl ein Änderungsereignis hinzu, das den Text für jede ausgewählte Option abruft und in das div schreibt.

Sie können jQuery it sehr Gesicht und erfolgreich und einfach zu bedienen verwenden

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>


$("select").change(function () {
  var str = "";

  $("select option:selected").each(function() {
    str += $( this ).text() + " ";
  });

  $( "div" ).text( str );
}).change();

— shekh danishuesn
quelle

2

function getValue(obj)
{  
   // it will return the selected text
   // obj variable will contain the object of check box
   var text = obj.options[obj.selectedIndex].innerHTML ; 

}

HTML-Snippet

 <asp:DropDownList ID="ddl" runat="server" CssClass="ComboXXX" 
  onchange="getValue(this)">
</asp:DropDownList>

— Muhammad Tariq Ahmed Khan
quelle

1

Bekommt das die richtige Antwort?

document.getElementById("newSkill").innerHTML

— Brian Childress
quelle

5

Dies gibt Ihnen den gesamten HTML-Code für die Optionen zurück. Wie `<option value =" 1 "> Eine Fertigkeit </ option> <option value =" 2 "> Eine andere Fertigkeit </ option> <option value =" 3 " > Noch eine Fähigkeit </ option> `

— Valentin Despa

0

    var ele = document.getElementById('newSkill')
    ele.onchange = function(){
            var length = ele.children.length
            for(var i=0; i<length;i++){
                if(ele.children[i].selected){alert(ele.children[i].text)};              
            }
    }

— Raton
quelle

0

var selectoption = document.getElementById("dropdown");
var optionText = selectoption.options[selectoption.selectedIndex].text;

— Debanjan Roy
quelle

Wie wäre es mit einem Text, der erklärt, was passiert?

— Steve K

Während eine Code-Antwort nur das Problem für die Operation löst, wird sie nicht empfohlen, da sie für zukünftige Besucher keinen Wert bietet. Eine Antwort, die nur eine Antwort liefert, wird schnell als "sehr niedrige Qualität" gekennzeichnet und als Ergebnis davon wird schnell gelöscht. Bearbeiten Sie Ihre Antwort, um eine Erklärung zu enthalten, was der bereitgestellte Code bewirkt.

— Ferrybig

Vielen Dank. Ich hoffe, meine Antwort ist für andere leicht zu verstehen.

— Debanjan Roy

Als ich versucht habe, dies zu protokollieren var optionText = selectoption.options[selectoption.selectedIndex].text;, wird nur das erste Optionselement zurückgegeben. Ich möchte, dass jeder von ihnen vom onchangeEreignis angezeigt wird .

— Chris22

0

Bitte versuchen Sie das Folgende. Dies ist der einfachste Weg und es funktioniert perfekt

var newSkill_Text = document.getElementById("newSkill")[document.getElementById("newSkill").selectedIndex];

— IbrahimSediq
quelle

0

Hier ist eine einfache und kurze Methode

document.getElementById('elementID').selectedOptions[0].innerHTML

— Manpreet Singh Dhillon
quelle