问题描述
如何将选择框中的多个选项添加到超链接的数据属性data-clc中？
在textarea中工作，但TestLink超链接不工作。
$("#selection").change(function() { $('#selected').html(' '); $("#selection option:selected").each(function() { var $this = $(this); if ($this.length) { var selText = $this.text(); console.log(selText); $('#selected').append(selText + ', '); $('#comeMan').attr('data-bid', selText); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple="" style="width:200px;" id="selection" name="fm_fields[]"> <option value="90" selected>Collection1</option> <option value="91" selected>Collection2</option> <option value="92">Collection3</option> <option value="93">Collection4</option> <option value="94">Collection5</option> <option value="95">Collection6</option> </select> <br/> <br/> <div> <a href="#" id="comeMan" data-clc="">TestLink</a> <textarea id="selected" rows="1" cols="50" readonly></textarea> </div>
目标
例如： <a href="#" id="comeMan" data-clc=" Collection2,Collection3,Collection4">TestLink</a>
1楼
您可以仅将属性设置为select元素的value （JQuery中的val() ，而不是构建所选项目的字符串。
另外，为了更轻松地使用data-属性，JQuery提供了方法（在下面使用）；
$("#selection").change(function() { $('#comeMan').data('clc', $('#selection').val()); console.log( $('#comeMan').data('clc')); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple style="width:200px;" id="selection" name="fm_fields[]"> <option value="90">Collection1</option> <option value="91">Collection2</option> <option value="92">Collection3</option> <option value="93">Collection4</option> <option value="94">Collection5</option> <option value="95">Collection6</option> </select> <br/> <br/> <div> <a href="#" id="comeMan">TestLink</a> </div>