Callum Callum - 21 days ago 7
jQuery Question

Copy nearest select box value of a given class name to following select box of same class name (using JQuery)

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

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>

Comments