我正在创建一个简单的购物 list 。我想要一个文本输入来说明该项目是什么，然后是一个下拉框以显示它在商店的哪个部分。填写完这两个部分后，我希望将文本添加为 li相关的 ul(基于它所在的商店部分)。这是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
<link rel="stylesheet" type="text/css" href="assets/css/shoppingList.css">
<script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Shopping List</h1>
<input type="text" placeholder="Type Shopping Item Here">
<select id="aisle">
<option value="">Please choose a section</option>
<option value="fruitAndVeg">Fruit and Veg</option>
<option value="meatFridge">Meat Fridge</option>
<option value="deliCounter">Deli Counter</option>
<option value="dairy">Dairy</option>
</select>
<ul id="fruitAndVeg">
<li>Apple</li>
<li>Pear</li>
</ul>
<ul id="meatFridge">
<li>Sausage</li>
<li>Chicken</li>
</ul>
<ul id="deliCounter">
<li>Ham</li>
<li>Cheese</li>
</ul>
<ul id="dairy">
<li>Milk</li>
<li>Yoghurt</li>
</ul>
<ul id="other">
<li>Sweets</li>
<li>Chocolate</li>
</ul>
<script type="text/javascript" src="assets/js/shoppingList.js"></script>
</body>
</html>
我可以使用 jQuery 将 li 添加到其中一个 ul，但如何根据下拉列表的值将它添加到正确的 ul？到目前为止，这是我的 jQuery
$("input[type='text']").keypress(function(event) {
var value = $(this).val();
if(event.which === 13){
$(this).val("");
$("#fruitAndVeg").append("<li>" + value + "</li>");
}
});
最佳答案
`$("input[type='text']").keypress(function(event) {
var value = $(this).val();
var option = $("#aisle").val()
if(event.which === 13){
$(this).val("");
$("#" + option).append("<li>" + value + "</li>");
}
});`
关于javascript - 文本输入结合下拉框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52768528/