Wählen Sie die ausgewählte Option aus dem ausgewählten Element aus


93

Ich versuche, die ausgewählte Option aus einem Dropdown-Menü abzurufen und ein anderes Element wie folgt mit diesem Text zu füllen. IE bellt einen Sturm auf und es funktioniert nicht in Firefox:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

Was mache ich falsch?

Antworten:


187

Hier ist eine kurze Version:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 hat einen guten Fang gemacht. Nach Ihrem Elementnamen zu urteilen, txtEntry2kann es sich um ein Textfeld handeln. Wenn es sich um eine Eingabe handelt, müssen Sie .val()stattdessen Folgendes verwenden .text():

  $('#txtEntry2').val($(this).find(":selected").text());

Für das "Was ist los?" Teil der Frage: Es .text()wird kein Selektor verwendet, es wird Text verwendet, auf den es eingestellt werden soll, oder nichts, um den bereits vorhandenen Text zurückzugeben. Sie müssen also den gewünschten Text abrufen und ihn dann in die .text(string)Methode für das Objekt einfügen, das Sie festlegen möchten, wie oben beschrieben.


7
Wenn txtEntry2es sich um eine Texteingabe handelt, muss val()stattdessen OP verwendet werden.
Karim79

@ karim79 - Guter Punkt, nach dem Elementnamen ist es wahrscheinlich, Aktualisierung.
Nick Craver

Ja, indem Sie .text in .val ändern und den Text anders abrufen, wurde alles verschoben. Danke Jungs
Matt

Du hast mich gerade davor bewahrt, offiziell verrückt zu werden!
Nathanchere

15

Versuche dies:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

8

Hier ist eine kürzere Version, die auch funktionieren sollte:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Nicht gefangener TypeError: Objekt # <HTMLSelectElement> hat keine Methode 'val'
DoodleKana

1
this.valuewürde es reparieren.
Kris Selbekk

4

Mit weniger jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value ist einfaches JavaScript.

(Quelle: Deutsches SelfHTML )


2

Versuchen Sie folgenden Code

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

2

Um die Anzahl der ausgewählten Elemente zu ermitteln, verwenden Sie

$("select option:selected").length

Um den Wert aller ausgewählten Elemente abzurufen, verwenden Sie

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

1

Das hat bei mir funktioniert:

$("#SelectedCountryId_option_selected")[0].textContent

1

Der erste Teil besteht darin, das Element aus dem Dropdown-Menü abzurufen, das folgendermaßen aussehen kann:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

Um über jQuery zu erfassen, können Sie Folgendes tun:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

Sobald Sie den Wert in Ihrer Variablen gespeichert haben, besteht der nächste Schritt darin, die in der Variablen gespeicherten Informationen an das Formularfeld oder das HTML-Element Ihrer Wahl zu senden. Es kann ein div p oder ein benutzerdefiniertes Element sein.

dh <p></p> OR <div></div>

Sie würden verwenden:

$ ('p'). html (Iterationen); OR $ ('div'). Html (Iterationen);

Wenn Sie ein Textfeld ausfüllen möchten, z.

<input type="text" name="textform" id="textform"></input>

Sie würden verwenden:

$ ('# textform'). text = iterations;

Natürlich können Sie all das in weniger Schritten erledigen. Ich glaube nur, dass es den Menschen hilft, zu lernen, wenn Sie alles in leicht verständliche Schritte aufteilen ... Ich hoffe, das hilft!


1

Mit der Eigenschaft selectedOptions (HTML5) können Sie die ausgewählten Optionen abrufen.

document.getElementbyId("id").selectedOptions; 

Mit JQuery kann dies erreicht werden

$("#id")[0].selectedOptions; 

oder

$("#id").prop("selectedOptions");

Die Eigenschaft enthält ein HTMLCollection-Array, das dieser ausgewählten Option ähnelt

[<option value=​"1">​ABC</option>]

oder Mehrfachauswahl

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

0

Das obige würde sehr gut funktionieren, aber es scheint, dass Sie den jQuery-Typecast für den Dropdown-Text verpasst haben. Ansonsten ist es ratsam, .val()Text für ein Element vom Typ Eingabetext festzulegen. Mit diesen Änderungen würde der Code wie folgt aussehen:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

0

Wenn Sie dies bereits haben und jquery verwenden, ist dies Ihre Antwort:

$ ($ (this) [0] .selectedOptions [0]). text ()


0

Angesichts dieses HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Wählen Sie anhand der Beschreibung für jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.