繁体   English   中英

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

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

我想要做的是:

在下面的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()各种组合,但我无法让它工作。

任何帮助非常感谢,谢谢。

如果我正确理解了复制的含义 - 选择与上一个选择相同的值,请参阅下面的代码。

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> 

起初我觉得它毫无意义,但现在我看到它在行动中,我发现这种行为有用。 感谢您耐心解释。

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

  • 在所有出现的.copy-times上委派click事件
  • 防止.copy-times<a> nchor一样跳跃
  • 使用above变量( above var above )来存储this.copy-times )前一个兄弟( .prev() )和类.colorsselect.colors )值( .val() )。
  • 使用类.colorsselect.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> 

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM