Javascript &奶酪 食物:比萨饼 补充:维生素e 食物名称: 选择一个标签: 食物 饮料 药物 补充
我没有看到第1期中所述的任何副本。并为fname添加了一个验证点,以确保它不是空的Javascript &奶酪 食物:比萨饼 补充:维生素e 食物名称: 选择一个标签: 食物 饮料 药物 补充,javascript,slimselect,Javascript,Slimselect,我没有看到第1期中所述的任何副本。并为fname添加了一个验证点,以确保它不是空的 newslimselect({ 选择:“#多个” }); const btnAdd=document.querySelector('input[type=“submit”]”); btnAdd.addEventListener('click',函数(e){ e、 预防默认值(); 让输入=document.querySelector(“#fname”); 让select=document.querySelect
newslimselect({
选择:“#多个”
});
const btnAdd=document.querySelector('input[type=“submit”]”);
btnAdd.addEventListener('click',函数(e){
e、 预防默认值();
让输入=document.querySelector(“#fname”);
让select=document.querySelector(“#type”);
让selectOptions=document.querySelectorAll(“#type>option”);
让selectMultiple=document.querySelector(“#multiple”);
//验证食物名称字段
如果(!input.value | | input.value==“”){
警报('请输入食物名称')
返回
}
//创建选项元素
让option=document.createElement('option');
让optionContent=selectOptions[select.selectedIndex].textContent+':'+input.value;
option.value=optionContent;
option.textContent=optionContent;
option.setAttribute('selected','');
//插入“选择多个”
选择multiple.appendChild(选项);
//重置输入并选择
input.value='';
select.selectedIndex=0;
})
饮料:柠檬水
食物:热狗
食物:mac&cheese
食物:比萨饼
补充:维生素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">
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>