我正在使用jQuery多选,并希望从表单向其中添加选项值。
在到目前为止构建的代码中,我选择了“食物:mac和奶酪”和“补充剂:维生素e”。如果我在输入字段中输入“可乐”并从下拉菜单中选择“饮料”,那么在清除表格的同时如何将其作为“饮料:可乐”添加到我的jQuery多重选择中(因此可以添加其他文本和下拉项添加)?
edit:我的问题是我如何才能使用HTML来选择“饮料:可乐”,使其变为蓝色(自选择以来,下拉菜单中呈灰色),例如“ food:mac&cheese”和“ supplements:Vitamin e”形成?抱歉,如果我之前没有很好解释。
<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">//<![CDATA[
new SlimSelect({
select: '#multiple'
})
//]]></script>
答案 0 :(得分:0)
尝试
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;
// insert in select multiple
selectMultiple.appendChild(option);
// reset input and select
input.value = '';
select.selectedIndex = 0;
})