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

Question

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

例如，我在输入框中输入“tacos”，在下拉列表中输入“food”select，然后单击“Add”，再重复 3 次，然后我将得到4 个相同的条目 - “食物：炸玉米饼”。

如果我只点击“添加”，它只会输入“food:”，分号后没有任何内容。

如何预防这两种情况？如何防止 1. 重复条目 2. blank/incomplete 提交被添加？

 <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>

Answer 1

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

我一直清除输入字段值，因为您不想接受任何重复，但我保留了 type 的当前 selection，以便用户在他们想输入另一个相同类型的项目。

另外：您的代码中没有 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 的多个 select 中没有其他选项，然后我才会附加一个带有该文本和值的选项。

Answer 2

我没有看到第 1 期中所述的任何重复项。并为 fname 添加了一个验证点以确保它不为空

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');

// validate food name field
if (!input.value || input.value == ' '){
alert('Please Enter Food Name')
return
}

// 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 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>

Answer 3

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>

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

How can I prevent duplicate and blank entries in a slimselectjs multiselect?

javascript

slimselect