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

大家好，我在这里有一个问题。因此，在此问题中，当我单击订购按钮时，无法显示所选选项的文本。为了获得结果，我需要选择的选项，然后选择并将其显示为div。有什么建议我必须在这里更改或添加吗？

PS：对不起，我还在这里学习，我希望我的问题不会使这里的任何人感到困惑。

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