將給定類名的最近選擇框值復制到以下相同類名的選擇框（使用JQuery）

Question

我想要做的是：

在下面的HTML示例中，當用戶單擊“從上面復制”時，我希望jQuery從點擊位置“向上”搜索HTML結構，找到帶有class="colors"的上一個選擇框，復制選定的值FROM選擇框並使用它在其正下方的選擇框中選擇相同的值（也使用class="colors" ）。 每個選擇框都具有相同的值集。

示例HTML：

<select class="colors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>

<a href="#" class="copy-times">Copy from above</a>
<select class="colors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>

<a href="#" class="copy-times">Copy from above</a>
<select class="colors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>

<a href="#" class="copy-times">Copy from above</a>
<select class="colors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>

我已經嘗試過.prevAll()各種組合，但我無法讓它工作。

任何幫助非常感謝，謝謝。

Answer 1

如果我正確理解了復制的含義 - 選擇與上一個選擇相同的值，請參閱下面的代碼。

我selected將具有相同value的選項添加到選項中，並將其從其他選項中刪除。

 $(".copy-times").on("click", function(e){ var $copyBtn = $(this); var copied = $copyBtn.prev(".colors").val(); $copyBtn.next(".colors").children().each(function(i,e){ var $option = $(this); if($option.val() == copied){ console.log(this); $option.attr("selected", ""); } else { $option.removeAttr("selected"); } }) }) 

 select { display: block; } a { display: inline-block; margin: 10px 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="colors"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select> <a href="#" class="copy-times">Copy from above</a> <select class="colors"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select> <a href="#" class="copy-times">Copy from above</a> <select class="colors"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select> <a href="#" class="copy-times">Copy from above</a> <select class="colors"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select> 

Answer 2

起初我覺得它毫無意義，但現在我看到它在行動中，我發現這種行為有用。 感謝您耐心解釋。

這看起來很基本沒什么特別的。

• 在所有出現的.copy-times上委派click事件
• 防止.copy-times像<a> nchor一樣跳躍
• 使用above變量（ above var above ）來存儲this （ .copy-times ）前一個兄弟（ .prev() ）和類.colors （ select.colors ）值（ .val() ）。
• 使用類.colors （ select.colors ）值（ .val() ）獲取this （ .copy-times ）下一個兄弟（ .next() ）並將其設置為前一個值（ above ）。

SNIPPET

 $('.copy-times').on('click', function(evt) { evt.preventDefault(); var above = $(this).prev('.colors').val(); $(this).next('.colors').val(above); }); 

 select, a { display: block; } select { margin: 0 0 20px 10px; } a { margin: 0 0 5px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="colors"> <option value="1">Red</option> <option value="2" selected>Blue</option> <option value="3">Green</option> </select> <a href="#" class="copy-times">Copy from above</a> <select class="colors"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select> <a href="#" class="copy-times">Copy from above</a> <select class="colors"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3" selected>Green</option> </select> <a href="#" class="copy-times">Copy from above</a> <select class="colors"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select> 

Answer 3

@Callum如果這符合您的要求，請您查看此代碼

如果有任何改變，請告訴我。

 function getSelected(src,target){ $( "#"+target ).val($( "#"+src ).val()); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="colors" id="first"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select> <a href="#" class="copy-times" onclick="getSelected('first','second')">Copy from above</a> <select class="colors" id="second"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select>