Display text of select option with button jQuery

Hello guys i have a question here. So in this problem i can’t display the text from selected option while i click order button. For the result i need the selected option i choose and display it into a div. Any suggestion what i must change or add here?

P.S : Sorry i’m still learning here, i hope my question didn’t confuse anyone here..

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

You should declare the array outside the click handler function. Also , you probably want to store the label attribute of the selected option. Join the array items with , before showing in the element:

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>