如何在slimselectjs multiselect中防止重复和空白条目？

Question

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

例如，我在输入框中输入"tacos“，在下拉列表中选择”食物“，然后点击”添加“并重复3次，然后我将得到4个相同的条目-”食物: tacos“。

如果我只点击“添加”，它将只输入“食物：”，分号后面没有任何东西。

如何防止这两种情况的发生？如何防止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>

Answer 1

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

我让您清除输入字段的值，因为您不想接受任何重复，但我保留了当前选择的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>`;

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

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>

​