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?

Matt
quelle

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.

Nick Craver
quelle
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());
});
Spitze
quelle
8

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

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });
ThdK
quelle
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 )

koppor
quelle
2

Versuchen Sie folgenden Code

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});
Ketan
quelle
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() + " ";
      });
Sandeep Kumar
quelle
1

Das hat bei mir funktioniert:

$("#SelectedCountryId_option_selected")[0].textContent
Mpho Makhubele
quelle
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!

HappyCoder
quelle
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> ...]
Alejandro
quelle
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());
Amit Dash
quelle
0

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

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

Tibi
quelle
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);
Tariq
quelle