Javascript 文本输入与下拉框相结合_Javascript_Jquery_Html

Javascript 文本输入与下拉框相结合

javascript jquery html

Javascript 文本输入与下拉框相结合,javascript,jquery,html,Javascript,Jquery,Html,我正在创建一个简单的购物清单。我想有一个文本输入，说明该项目是什么，然后由一个下拉框，以显示该商店的哪个部分，它是在后面。填写这两部分后，我希望文本在相关ul中添加为li（基于其所在店铺的部分）。这是我的html： <!DOCTYPE html> <html> <head> <title>Shopping List</title> <link rel="stylesheet" type="text/css" h

我正在创建一个简单的购物清单。我想有一个文本输入，说明该项目是什么，然后由一个下拉框，以显示该商店的哪个部分，它是在后面。填写这两部分后，我希望文本在相关ul中添加为li（基于其所在店铺的部分）。这是我的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向其中一个uls添加li，但是如何根据下拉列表的值将其添加到正确的ul？到目前为止，这里是我的jQuery

    $("input[type='text']").keypress(function(event) {
    var value = $(this).val();
    if(event.which === 13){
        $(this).val("");
        $("#fruitAndVeg").append("<li>" + value + "</li>");
    }    
});

$（“输入[type='text']）。按键（函数（事件）{
var值=$（this.val（）；
if（event.which==13）{
$（此）.val（“”）；
$（“#果蔬”）。追加（“”+value+“”）；
}    
});

你能试试这个吗

   if(event.which === 13)
{ 
     var ulId = $('#aisle').val();
     $(ulId).append( "<li>" + value + "</li>" );
     $(this).val("");
    }

if（event.which==13）
{ 
var ulId=$（“#过道”）.val（）；
$（ulId）。追加（“”+值+“”）；
$（此）.val（“”）；
}

试试这个

   $("#"+value).append("<li>" + value + "</li>");

$（“#”+value）.追加（“”+value+””）；

您需要在

选择

上监听

更改

事件，以便使用所选值和

输入

值附加到右侧列表中。例如：

const item=$（'input'）；
常量通道=$（“#通道”）；
过道。更改（（）=>{
让value=item.val（）；
如果（值）{
$（“#”+roadway.val（））.append（“”+value+”）；
item.val（“”）；//重置输入
}
});

请选择一个部分
水果和蔬菜
肉冰箱
熟食柜台
乳品的

苹果
梨


香肠
鸡


火腿
奶酪


牛奶
酸奶


糖果
巧克力
`$（“输入[type='text']”）。按键（函数（事件）{
var值=$（this.val（）；
var option=$（“#过道”）.val（）
if（event.which==13）{
$（此）.val（“”）；
$（“#”+选项）。追加（“”+值+””）；
} 
});`

。这很有效。非常感谢。请尝试添加一些解释，否则您的代码专用答案将被删除。

`$("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>");
      } 
});`