Wie dynamisches Eingabefeld mit dynamischer Auswahloption in jquery gefüllt wird

Question

Ich versuche, Eingabefeld mit dem Wert der ausgewählten Option zu füllen, beide werden dynamisch geladen. Ich kann den ausgewählten Optionswert laden und kann ihn aktualisieren, wenn die Option geändert wurde. aber wenn es 10 Eingabefelder und 10 Auswahl-Option-Tags gibt, wähle ich eine Option aus 10 Tags, denn alle 10 Eingabefelder zeigen denselben Wert. Jedes Eingabefeld hat 10 Optionen. Ich muss den Wert individuell ändern.

hier ist eine Funktion von jquery,

$("#myselect").change(function() { 
    $("select option:selected").each(function() { 
     $('.returnValue').val($(this).text()); 
    }); 
}); 

Ich möchte einzelne Produktmenge in Eingabefeld einfügen.

Ich kämpfe für zwei Tage bitte helfen.

<select id="myselect"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

<input class="returnValue" type="text" value=""> 

Answer 1

Sie Ihr Problem auf unterschiedliche Weise lösen können:

Wenn die Auswahl- und Eingabefelder nacheinander sind, können Sie verwenden:

$(this).next('.returnValue').val($(this).val()); 

Ein anderer Ansatz kann wählt ein neues Attribut wie die Grundlage für jede über das Hinzufügen von:

input-field="newlass1" 

Und so fügen Sie eine neue Klasse mit dem entsprechenden Eingabefeld in eine Weise, das Auswahl- und Eingabefeld zu verknüpfen.

In diesem Fall können Sie es tun:

$('input.' + $(this).attr('input-field')).val($(this).val()); 

Das Snippet:

$("[id^=myselect]").change(function() { 
 
    
 
    
 
    //$(this).next('.returnValue').val($(this).val()); 
 
    
 
    
 
    $('input.' + $(this).attr('input-field')).val($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
<select id="myselect1" input-field="newlass1"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
<input class="returnValue newlass1" type="text" value=""><br> 
 
<select id="myselect2" input-field="newlass2"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
<input class="returnValue newlass2" type="text" value=""><br> 
 
<select id="myselect3" input-field="newlass3"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
<input class="returnValue newlass3" type="text" value=""><br> 
 
<select id="myselect4" input-field="newlass4"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
<input class="returnValue newlass4" type="text" value="">

Answer 2

Ihr Problem ist für alle Eingabefelder die gleiche Klasse verwenden, müssen Sie für jedes Eingabefeld ein plunker

hier ist eine andere id setzen

Answer 3

Verwenden $(this).parent().next('.returnValue').val($(this).text()); Wert auf das nächste Eingabefeld zu setzen.

$(".myselect").change(function() { 
 
    
 
    $("select option:selected").each(function() { 
 
     
 
     $(this).parent().next('.returnValue').val($(this).text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="myselect"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<input class="returnValue" type="text" value=""> 
 

 
<select class="myselect"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<input class="returnValue" type="text" value=""> 
 
<select class="myselect"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<input class="returnValue" type="text" value="">