时间戳

首页 > 解决方案 > 复制文本

和过去

问题描述

标签： javascriptjqueryhtml

解决方案

  • 选择值将随其中的任何值而变化..在您的情况下，该值不是选择中的选项，因此您需要先附加它

const btnsadp = document.getElementsByClassName('adp-a-copier');
for(btn of btnsadp)
{
  btn.addEventListener('click', elt => {
    var The_Select = document.getElementById('adp-a-coller'),
        The_Text = document.createTextNode(elt.target.dataset.clipboardText),
        The_option = document.createElement("OPTION");
    The_option.appendChild(The_Text);
    The_Select.appendChild(The_option);
    The_Select.value = elt.target.dataset.clipboardText;
    return false;
  }, false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Copy : <div class="adp-a-copier" data-clipboard-text="2001" style="cursor: pointer;">2001</div>

Past : <select id="adp-a-coller"><option>1</option></select>

这对我来说是 jquery 版本，使用起来更容易

$(document).on('click' , '.adp-a-copier' , function(){
  var $this = $(this),
      text = $this.data('clipboard-text');
  if(!$this.hasClass('appended')){
    $this.addClass('appended');
    $('#adp-a-coller').append('<option value="'+text+'">'+text+'</option>').val(text);
  }else{
    $('#adp-a-coller').val(text);
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Copy : <div class="adp-a-copier" data-clipboard-text="2001" style="cursor: pointer;">2001</div>
Copy : <div class="adp-a-copier" data-clipboard-text="2003" style="cursor: pointer;">2003</div>
Copy : <div class="adp-a-copier" data-clipboard-text="2005" style="cursor: pointer;">2005</div>

Past : <select id="adp-a-coller"></select>

说明：我使用appendedjquery 片段中的类将文本仅附加一次到选择中，即使您继续单击它也将仅保留一次附加

推荐阅读