Question

我有2个多选框，一个是带值的，第二个是空的。当我从左侧选择选项并单击箭头按钮时，它将值带到第二个。我的问题是如何通过button中的函数清除它并恢复这些值，我的意思是将值恢复为第一个值并清除第二个值。我尝试过那样，但是不起作用。

myOptions.options.length = 0;
myOptions.options[0] = new Option("", "");

Answer 1

这是一个使用单击侦听器和两个按钮的简单添加/删除模型。

在示例中，我们查看了selectedOptions集合并将其移动。

const moveFrom = (source) => {
  let target = (source === 'main') ? '#target' : '#main';
  target = document.querySelector(target);
  Array.from(document.querySelector(`#${source}`).selectedOptions).forEach(opt => {
    target.add(opt);
  });
};

document.addEventListener('click', (e) => {
  if(e.target.matches('#add')) {
    moveFrom('main');
  }
  if(e.target.matches('#remove')){
    moveFrom('target');
  }
});

div {
  display: inline-block;
}

select {
  display: inline-block;
  width: 50px;
}

<div>
  <select id="main" size="5" multiple="true">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
<div>
  <button id="add">Add</button>
  <button id="remove">remove</button>
</div>
<div>
  <select id="target" size="5" multiple="true">
  </select>
</div>

Javascript清除多选框

1 个答案: