如何在jquery中使用動態選擇選項填充動態輸入字段

Question

我想填充輸入字段，所選選項的值都是動態加載的。我可以加載選定的選項值，並可以在選項更改時更新它。但是如果有10個輸入字段和10個選擇選項標籤，並且我從10個標籤中選擇一個選項而不是所有10個輸入字段顯示相同的值。每個輸入字段有10個選項。我需要單獨更改價值。

這裏是jQuery的功能，

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

我想在輸入字段中插入單個產品的數量。

我掙扎了兩天請幫忙。

<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

可以解決不同的方式你的問題：

如果選擇和輸入字段是一個接一個，你可以使用：

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

另一種方法可以根據添加的每個選擇像一個新的屬性：

input-field="newlass1" 

所以添加一個新類到相應的輸入字段的方式來選擇和輸入字段鏈接。

在這種情況下，你可以做到這一點：

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

的片段：

$("[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

你的問題是使用同一類的所有輸入字段，需要設置不同的id爲每個輸入字段

這裏有一個plunker

Answer 3

使用$(this).parent().next('.returnValue').val($(this).text());到值設置爲下一個輸入字段。

$(".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="">