Question

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

例如，我在输入框中输入“炸玉米饼”，在下拉菜单中选择“食物”，然后单击“添加”，然后再重复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>

Answer 1

您可以使用.innerHTML来简化脚本，而不必费力地构建option元素。我还以删除其type.options属性的方式简化了您的value。您只能在脚本中引用它们的文本值。而且，当您省略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>`;

我首先断言在多重选择中没有其他选项，其文本内容等于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>

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

2 个答案: