Javascript 使用按钮jQuery显示选择选项的文本

大家好，我有个问题。因此，在这个问题中，当我单击“订单”按钮时，无法显示所选选项中的文本。对于结果，我需要选择所选的选项并将其显示在div中。有什么建议我必须在此处更改或添加什么吗

抱歉，我还在这里学习，我希望我的问题没有让这里的任何人感到困惑

html

---

您应该在click处理程序函数之外声明数组。此外，您可能希望存储选定选项的标签属性。在元素中显示之前，将数组项与以下项联接：

风险值数据={ 食物：[ { id:1， 名称：“炒饭”， 价格：'10.000' }, { id:2， 名称：“炒面”， 价格：'9.000' }, { id:3， 名称：“煎饼”， 价格：'8.500' }, { id:4， 名称：“炸薯条”， 价格：'7.500' } ], 饮料：[ { id:1， 名字：“可乐”， 价格：'4.600' }, { id:2， 名称：“橙汁”， 价格：'5.400' }, { id:3， 名称：“矿泉水”， 价格：'3.500' }, { id:4， 名称：“咖啡”， 价格：'5.800' } ] } 功能手柄更换{ 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 dataSelect.appendChildoptionEle } } 手换 $document.readyfunction{ var selectMenu=[]； $button.clickfunction{ selectMenu.push$type\u选择选项：selected.attr'label'； $.result.htmlselectMenu.join'，'； }; }; 菜单 食物 喝 顺序

---

要执行所需操作，可以从type_select元素中的所选选项获取文本

还请注意，您可以对代码进行一些优化。首先，由于您已经在使用jQuery，您可以使用它将事件处理程序绑定到category\u select元素的更改，这比使用onX事件属性更好。此外，还可以使用map和html创建选项元素，以便更简洁地添加到DOM中

此外，请注意，我删除了类型_select上的each循环，因为只能从中选择单个值，因此循环是冗余的

话虽如此，请尝试以下方法：

var数据={食品：[{id:1，名称：炒饭，价格：10.000}，{id:2，名称：炒面，价格：9.000}，{id:3，名称：煎饼，价格：8.500}，{id:4，名称：炸薯条，价格：7.500}]，饮料：[{id:1，名称：可乐，价格：4.600}，{id:2，名称：橙汁，价格：5.400}，{id:3，名称：矿泉水，价格：3.500}，{id:4，名称：咖啡：800}； jQuery$=>{ 让$category=$'category_select'； 让$type=$'type_select'； $category.on'change'，e=>{ 让options=data[e.target.value].mapo=>`${o.name}`； $type.htmloptions； }.触发“改变”； $button.clickfunction{ $.result.html`${$type.find'option:selected'.text}:${$type.val}`； }; }; 钮扣{ 宽度：50%； 左边缘：25%； 右边距：25%； } 食物 喝 顺序

---

哦，对了，我没想过。谢谢你的回答和解释，先生，谢谢！没问题，很乐意帮忙

<div class="container">
    <div class="container-fluid text-center">
        <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
        <br />
        <div class="row">
            <div class="col-md-6">
                <select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
                    <option value="Food">Food</option>
                    <option value="Drink">Drink</option>
                </select>
            </div>
            <br />
            <div class="col-md-6">
                <select class="form-select form-select-lg mb-3" id="type_select"></select>
            </div>
        </div>
    </div>
</div>
<br />
<button type="button" style="width:50%; margin-left:25%; margin-right:25%">Order</button>
<br />
<div class="result"></div>

var data = {
        Food: [
            {
                id: 1,
                name: 'Fried Rice',
                price: '10.000'
            },
            {
                id: 2,
                name: 'Fried Noodle',
                price: '9.000'
            },
            {
                id: 3,
                name: 'Pancake',
                price: '8.500'
            },
            {
                id: 4,
                name: 'French Fries',
                price: '7.500'
            }
        ],
        Drink: [
            {
                id: 1,
                name: 'Cola',
                price: '4.600'
            },
            {
                id: 2,
                name: 'Orange Juice',
                price: '5.400'
            },
            {
                id: 3,
                name: 'Mineral Water',
                price: '3.500'
            },
            {
                id: 4,
                name: 'Coffee',
                price: '5.800'
            }
        ]
    }

    function handleChange() {
        var x = document.getElementById("category_select").value;

        var dataOptions = data[x]
        var dataSelect = document.getElementById('type_select')
        dataSelect.innerHTML = ''

        dataOptions.forEach(function (option) {
            var optionEle = document.createElement('option')
            optionEle.value = option.id
            optionEle.label = option.name

            dataSelect.appendChild(optionEle)
        })

    }
    handleChange()

    $(document).ready(function () {
        $("button").click(function () {
            var selectMenu = [];
            $.each($("#type_select"), function () {
                selectMenu.push($(this)).val();
            });
            $(".result").html(selectMenu);
        });
    });