javascript - 如何防止 slimselectjs 多选中的重复和空白条目？

Question

我正在使用 slimselectjs 多选插件，并有一个 HTML 表单提交给它以添加选定的选项值。但是，当通过表单添加选定的选项值时，如果我输入相同的文本和标签，可能会创建重复项。此外，如果我只是单击“添加”，它将添加一个没有“食物名称”的条目。

例如，我在输入框中输入“tacos”，在下拉菜单中选择“food”，然后单击“Add”并重新执行 3 次，然后我将有 4 个相同的条目 - “food:炸玉米饼”。

如果我只是单击“添加”，它将只输入“食物：”，分号后没有任何内容。

如何预防这两种情况？如何防止 1. 重复条目 2. 添加空白/不完整的提交？

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.css" rel="stylesheet"></link>

<select id="multiple" multiple>
  <option value="value 1">drinks: lemonade</option>
  <option value="value 2">food: hot dog</option>
  <option value="value 3" selected>food: mac & cheese</option>
  <option value="value 4">food: pizza</option>
   <option value="value 8" selected>supplements: vitamin e</option>
</select>
<br><br>
<form>
  <label for="fname">food name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="type">Choose a label:</label>
  <select name="type" id="type">
    <option value="value 5">food</option>
    <option value="value 6">drinks</option>
    <option value="value 25">drugs</option>
    <option value="value 50">supplements</option>
  </select><br><br>
   <input type="submit" value="Add">
</form>

<script type="text/javascript">
new SlimSelect({
  select: '#multiple'
});

const btnAdd = document.querySelector('input[type="submit"]');
btnAdd.addEventListener('click', function(e) {
e.preventDefault();

let input = document.querySelector('#fname');
let select = document.querySelector('#type');
let selectOptions = document.querySelectorAll('#type > option');
let selectMultiple = document.querySelector('#multiple');

// create option element
let option = document.createElement('option');
let optionContent = selectOptions[select.selectedIndex].textContent+':'+input.value;
option.value = optionContent;
option.textContent = optionContent;
option.setAttribute('selected', '');
// insert in select multiple
selectMultiple.appendChild(option);

// reset input and select
input.value = '';
select.selectedIndex = 0;
})
</script>

标签： javascriptslimselect

Answer 1

您可以通过使用而不是费力地.innerHTML构建元素来简化脚本。我还以删除它们的属性的方式option简化了您的。您只在脚本中引用它们的文本值。并且当您省略该属性时，选项文本将自动成为该选项的。type.optionsvaluevaluevalue

我一直在清除输入字段值，因为您不想接受任何重复，但我将当前选择保留type在适当的位置，以便用户在输入另一个相同类型的项目时更容易。

另外：你的代码中没有 jQuery，所以我删除了标签。

new SlimSelect({ select: '#multiple' });
let mul=document.querySelector('#multiple');

document.querySelector('#add').addEventListener('click', function(e) {
  e.preventDefault();
  let inp=document.querySelector('#fname'), foodName=inp.value.trim();
  if (foodName) {
    let newval = document.querySelector('#type').value+': '+foodName;
    // create option element and insert it in select multiple:
    if ([...mul.children].every(o=>o.textContent!=newval))
      mul.innerHTML+=`<option selected>${newval}</option>`;
    // reset input:
    inp.value = '';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.css" rel="stylesheet"></link>

<select id="multiple" multiple>
  <option value="value 1">drinks: lemonade</option>
  <option value="value 2">food: hot dog</option>
  <option value="value 3" selected>food: mac & cheese</option>
  <option value="value 4">food: pizza</option>
   <option value="value 8" selected>supplements: vitamin e</option>
</select>
<br><br>
<form>
  <label for="fname">food name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="type">Choose a label:</label>
  <select name="type" id="type">
    <option>food</option>
    <option>drinks</option>
    <option>drugs</option>
    <option>supplements</option>
  </select><br><br>
   <button id="add">Add</button>
</form>

动作的主要部分是

if ([...mul.children].every(o=>o.textContent!=newval))
  mul.innerHTML+=`<option selected>${newval}</option>`;

我首先断言在多选中没有其他选项，文本内容等于，newval然后我才会附加一个带有该文本和值的选项。