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

Question

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

P.S : 对不起，我还在学习，希望我的问题没有让这里的任何人感到困惑..

html

<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>

js

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);
        });
    });

Answer 1

您应该在点击处理函数之外声明数组。此外，您可能希望存储所选选项的 label 属性。在元素中显示之前用 , 加入数组项：

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 () {
    var selectMenu = [];
    $("button").click(function () {
        selectMenu.push($("#type_select option:selected").attr('label'));
        $(".result").html(selectMenu.join(', '));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

要执行您需要的操作，您可以从 type_select 元素中的选定选项中获取 text()。

另请注意，您可以对代码进行一些优化。首先，当您已经在使用 jQuery 时，您可以使用它以不显眼的方式将事件处理程序绑定到 #category_select 元素的更改，这比使用 onX 事件属性更好。此外，您可以使用 map() 和 html() 更简洁地创建要添加到 DOM 的 option 元素。

此外，请注意，我删除了 #type_select 上的 each() 循环，因为只能从中选择一个值，因此循环是多余的。

话虽如此，试试这个：

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"}]};

jQuery($ => {
  let $category = $('#category_select');
  let $type = $('#type_select');
  
  $category.on('change', e => {
    let options = data[e.target.value].map(o => `<option value="${o.id}">${o.name}</option>`);
    $type.html(options);
  }).trigger('change');
  
  $("button").click(function() {
    $(".result").html(`${$type.find('option:selected').text()}: ${$type.val()}`);
  });
});

button {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Irrelevant HTML removed from this example -->

<select class="form-select form-select-lg mb-3" id="category_select">
  <option value="Food">Food</option>
  <option value="Drink">Drink</option>
</select>

<select class="form-select form-select-lg mb-3" id="type_select"></select>
<button type="button">Order</button><br />
<div class="result"></div>

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

Display text of select option with button jQuery

html

javascript

jquery

bootstrap-5