将选定的多个值复制到文本框

Question

我有如下下拉列表。

     <select id="checkOwner" multiple="multiple" onchange="copyValue()">
       <option value="FIRSTNAME">First Name</option>
       <option value="LASTNAME">Last Name</option>
     </select>

我使用 Below javascript 添加复选框

$(function() {
  $('#checkOwner').multiselect({
   });  
});

我在下方使用 javascript 将所选值复制到文本字段。

function copyValue() {
  var dropboxvalue = document.getElementById('checkOwner').value;
  document.getElementById('mytextbox').value = dropboxvalue;
}

但问题是，这个copy只有一个值。我想复制所有选定的值。我该怎么做？

Answer 1

我的方法是在选项上循环，然后检查条件是否已选中

html

<select name="checkOwner" multiple="multiple" onchange="copyValue(this)">

js

const copyValue = me => {
    let y = Array.from(document.querySelectorAll('select option')).map(x => x.selected ? x.value : '')
    document.getElementById('mytextbox').value = y.join(' ');
}

Answer 2

遍历选项并将选定的值放入字符串中，然后将字符串输出到文本框

function copyValue() {

  var str = "";
  for (var option of document.getElementById('checkOwner').options) {
    if (option.selected) {
      str+= option.value+" ";
    }

    document.getElementById('mytextbox').value = str;
  }
}

将选定的多个值复制到文本框

Copy selected multiple values to the text box

javascript

checkbox

jquery

drop-down-menu