将给定类名的最近选择框值复制到以下相同类名的选择框（使用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的选项，并将其从其他选项中删除。

＆＃13;

＆＃13;

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

＆＃13;

select {
  display: block;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我一开始认为这一点毫无意义，但现在我看到它在行动中，我发现这种行为是有用的。感谢您耐心解释。

这看起来很基本没什么特别的。

• 在所有.copy-times
出现时委派点击事件
• 防止.copy-times像<a> nchor
一样跳跃
• 使用变量above（var above）将this（.copy-times）之前的兄弟（.prev()）与班级.colors（{{ 1}}）value（select.colors）。
• 获取.val()（this）下一个兄弟（.copy-times）与.next()（.colors）类值（select.colors）并设置它是前一个值（.val()）的值。

段

＆＃13;

＆＃13;

above

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

@Callum如果这符合您的要求，请您查看此代码

让我知道是否有任何改变。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;