Javascript 动态添加新字段时，选择创建时不显示var的选项

这里有一个小问题，当我添加一个新字段时，我从var创建的select选项将不会显示。我尝试了一种多种方法，比如从id改为class，在varhtml中添加一个var选项名，但仍然不起作用。我想我的JS嵌套是问题还是遗漏了什么？如果有任何建议，我必须在这里更改或添加什么代码

风险值数据={ 食物：[ { id:1， 名称：“炒饭”， 价格：10000 }, { id:2， 名称：“炒面”， 价格：9000 }, { id:3， 名称：“煎饼”， 售价：8500 }, { id:4， 名称：“炸薯条”， 售价：7500 } ], 饮料：[ { id:1， 名字：“可乐”， 售价：4600 }, { id:2， 名称：“橙汁”， 售价：5400 }, { id:3， 名称：“矿泉水”， 价格：3500 }, { id:4， 名称：“咖啡”， 售价：5800 } ] } 功能手柄更换{ var x=document.getElementByIdcategory\u select.value； var dataOptions=data[x] var dataSelect=document.getElementById'type\u select' dataSelect.innerHTML= dataOptions.forEachfunction选项{ var optionEle=document.createElement'option' optionEle.value=option.id optionEle.label=option.name optionEle.setAttribute'data-price'，option.price dataSelect.appendChildoptionEle } } 手换 $.addRow.clickfunction{ var html=； html+=； html+=； html+='Del'； html+=； html+=； html+=； html+=‘食物’； html+=“饮料”； html+=； html+=； html+=； html+=； html++$type_select option:selected.attr'label'+；//此处未显示var数据中的select选项 html+=； html+=； html+=； html+=； html+=； $'.container fluid'.html； }; $document.on'click'，'.delRow'，函数{ $this.closest'.row'.remove； }; $document.readyfunction{ var selectMenu={}； $.order.clickfunction{ var itemName=$type_选择选项：selected.attr'label'； var price=Number$type_选择选项：选中。数据“price”； var count=编号$num.val； var总额=价格*数量； 选择功能表[项目名称]=总计 var result=JSON.stringifyselectMenu.replace/，/g，.replace/\{124;\}}/g， $.result.htmlresult； }; }; 按钮[类型=提交]{ 宽度：50%； 左边缘：25%； 右边距：25%； } 按钮[类型=按钮]{ 字体大小：20px； 宽度：50%； 左边缘：25%； 右边距：25%； } 菜单 添加 食物 喝 顺序 使用把手

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>

代码

模板

<script id="template1" type="text/x-handlebars-template">
    <div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br/>
            {{#data}}
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-lg addRow" row="{{@index}}">Add</button>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 category_select" row="{{@index}}">
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 type_select">
                        {{#type}}
                            <option value="{{name}}">{{name}}</option>
                        {{/type}} 
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control form-control-lg mb-3" id="num" placeholder="Qty" min="0">
                </div>
            </div>
            {{/data}}
        </div>
    </div>
</script>

您可以将其传递到handleChange函数中，该函数引用当前选择框，该选择框正在更改，然后使用该函数获取其他选择框引用和更改值

演示代码：

风险值数据={ 食物：[{ id:1， 名称：“炒饭”， 价格：10000 }, { id:2， 名称：“炒面”， 价格：9000 }, { id:3， 名称：“煎饼”， 售价：8500 }, { id:4， 名称：“炸薯条”， 售价：7500 } ], 饮料：[{ id:1， 名字：“可乐”， 售价：4600 }, { id:2， 名称：“橙汁”， 售价：5400 }, { id:3， 名称：“矿泉水”， 价格：3500 }, { id:4， 姓名：'C 奥菲‘， 售价：5800 } ] } 功能手柄{ //如果未定义，请使用“最近”和“查找”获取选择值 var els_cat=el！=未定义？$el.nestest.outer.find.cat.val:$category_select.val console.logels_cat 变量els\u type=el！=未定义？$el.nestest.outer.find.type:$type\u select var数据选项=数据[els\U cat] els_type.html//empty dataOptions.forEachfunctionoption{ var optionEle=document.createElement'option' optionEle.value=option.id optionEle.label=option.name optionEle.setAttribute'data-price'，option.price els_type.appendoptionEle//追加相同 } } 手换 $.addRow.clickfunction{ var cloned=$type_select.clone//cloned select var html=； //增加了一个外部类 html+=； html+=； html+='Del'； html+=； html+=； html+=；//如果需要，也可以使用克隆来完成此操作。相同的选项。。 html+=‘食物’； html+=“饮料”； html+=； html+=； html+=； html+=； html++=+$cloned.html+；//传递相同的 html+=； html+=； html+=； html+=； html+=； $'.container fluid'.html； }; 菜单 添加 食物 喝 顺序

---

您好，我可以修复您的代码，但我可以提供更好的解决方案吗？当然可以，请随意更改，先生！您好，您需要在类型选择中显示相同的选项吗？为什么不使用克隆？@Swati我已经在我创建的附加html中尝试了clone.attr'label'，但仍然没有在结果中显示该选项。我做错了吗？使用var cloned=$type\u select.clone，然后删除$type\u select选项：selected.attr'label'行并使用$cloned.html。工作啊，好吧，比我想象的要复杂一点。但由于这是我需要的结果，我将努力学习它。谢谢你的善意解释，希望我没有为此花费你太多时间。不，一点也不。如果你有任何疑问，请告诉我。此外，我还使用了条件运算符if else，因为onload默认情况下会调用您的函数，所以不会有此引用，所以现在将从第一个选择框中获取默认值。

<script id="template1" type="text/x-handlebars-template">
    <div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br/>
            {{#data}}
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-lg addRow" row="{{@index}}">Add</button>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 category_select" row="{{@index}}">
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 type_select">
                        {{#type}}
                            <option value="{{name}}">{{name}}</option>
                        {{/type}} 
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control form-control-lg mb-3" id="num" placeholder="Qty" min="0">
                </div>
            </div>
            {{/data}}
        </div>
    </div>
</script>