如何将数据属性添加到Hyperlink？

Question

如何从选择框添加多个选项到超链接中的数据属性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>

Answer 1

您可以将属性设置为value元素的val()（jQuery中的select），而不是构建所选项的字符串。

此外，为了更容易使用data-属性，JQuery提供了.data()方法（在下面使用）;

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