将给定类名的最近选择框值复制到以下相同类名的选择框（使用JQuery）

Question

What I'm trying to do is:

On the HTML sample below, when a user clicks "Copy from above", I want the jQuery to search 'up' the HTML structure from the click location, find the previous select box with class="colors" , copy the selected value FROM that select box and use it to select the same value in the select box immediately below it (also with class="colors" ). Every select box has the same set of values.

Sample 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>

I have tried various combinations of .prevAll() , but I can't get it working.

Any help greatly appreciated, Thanks.

Answer 1

If I understood correctly what you mean by copy - select the same value as the previous select, see the code below.

I went with adding selected attribute to the option with same value and removing it from other options.

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

I thought it was pointless at first, but now that I see it in action, I see there's a use for this behavior. Thanks for your patience in explaining it.

This seems pretty basic nothing fancy.

• Delegate the click event on all occurrences of .copy-times
• Prevent .copy-times from jumping like an <a> nchor
• Use variable above ( var above ) to store this ( .copy-times ) previous sibling ( .prev() ) with class .colors ( select.colors ) value ( .val() ).
• Get this ( .copy-times ) next sibling ( .next() ) with the class .colors ( select.colors ) value ( .val() ) and set it to the value of the previous value ( 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 Can you please have a look at this code if this will meet your requirement

Let me know if there any changes to be done.

 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>