Wählen Sie Optionstext basierend auf Wert

Question

Ich habe ein Menü. Bei gegebenem Wert möchte ich den Text zurückgeben. Zum Beispiel würde 0 "Null" zurückgeben, 1 würde "Eins" zurückgeben usw. Beachten Sie, dass es mir egal ist, welche Option momentan ausgewählt ist und ob ich das Menü automatisch auswählen möchte, sondern nur das Auswahlmenü verwenden möchte eine primitive Datenbank. Kann dies einfach mit JavaScript oder jQuery durchgeführt werden, ohne die einzelnen Optionen zu durchlaufen?

<select> 
<option value="0">zero</option> 
<option value="1">one</option> 
<option value="2">two</option> 
<option value="3">three</option> 
</select> 

Dank

Answer 1

Anstelle der Verwendung der select als Datenbank (erfordert eine teure Operation für einfache Lookups), erstellen Sie einen Datensatz von ihm einmal, dann verwenden Sie das ...

var vals = $('select option').map(function(i, el) { return el.text; }) 
          .toArray(); 
alert(vals[2]); // "two" 

---

Oder wenn die option Werte 0 basierte Indizes werden nicht sequentiell, dann ein Objekt verwenden ...

var vals = {}; 

$('select option').each(function(i, el) { vals[el.value] = el.text }); 

alert(vals[2]); // "two" 

Answer 2

Verwenden Sie das Attribut-Selektor gleich:

var valToSearchFor = 0; 
    textFromOption = $('select option[value="' + valToSearchFor + '"]').text(); 

Dies wird iterieren immer noch jeden option auf das Vorhandensein des Wertes für die Sie schauen, um zu testen, aber es wird Mach 'hinter die Kulissen', damit du nicht musst.

Es gibt die Möglichkeit, querySelectorAll() verwenden (wenn auch mit mehr oder weniger der gleichen Schreibweise wie die oben jQuery):

var valToSearchFor = 0; 
    textFromOption = document.querySelectorAll('option[value="' + valToSearchFor + '"]').innerHTML; 

Dies erfordert natürlich, dass der Browser querySelectorAll() implementiert, und nicht alle tun (IE insbesondere).

Referenzen:

• attribute-equals [attribute="value"] selector.
• document.querySelectorAll().

Answer 3

var value = '3'; 
alert($('select option[value=' + value + ']').text()); 

Live demo.

Auch sollten Sie die Wählen Sie eine ID und aktualisieren Sie die Wähler geben, weil, wenn Sie mehrere Drop-Down-Listen haben die Wähler nicht funktionieren:

alert($('#id_of_the_select option[value=' + value + ']').text()); 

Answer 4

Verwenden Sie die selected: Selector. Beispiel direkt auf der Seite angegeben.

http://api.jquery.com/selected-selector/

$("select").change(function() { 
     var str = ""; 
     $("select option:selected").each(function() { 
      str += $(this).text() + " "; 
      }); 
     $("div").text(str); 
    }) 
    .trigger('change'); 

Ersetzen Sie die "div" mit dem Fall, dass Sie

http://jsfiddle.net/ckaufman/aDU5E/1/

Answer 5

Wie sonst würden Sie für einen Wert scannen auszulösen versuchen, ohne über jede Option laufen? Es gibt keine magische Eigenschaft, die es für dich tut.

Allerdings können Sie diesen Code verwenden:

(function() { 
    var sels = document.getElementsByTagName('select'), l = sels.length, i, 
     opts, m, j, o; 
    for(i=0; i<l; i++) { 
     o = {}; 
     opts = sels[i].options; 
     m = opts.length; 
     for(j=0; j<m; j++) o[opts[j].value] = opts[j].text; 
     sels[i].map = o; 
    } 
})(); 

setzen, die kurz vor </body>, und jetzt können Sie die Karte von jedem <select> auf Ihrer Seite zu finden:

var sel = document.getElementById('mySelect'); 
alert(sel['0']);