显示 select 选项中的文本，并在结果中添加元素

Question

Guys i need a little help about this code here. So i want to display the option like this: "Fried Rice = 10.000" as the result, but in this code the text from select option box also have the price. For the final result i need the text from select option only have the text (without price), while after i press order button it will display text from select option name + " = " + price. Any idea what should i change?

 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 + " = " + option.price dataSelect.appendChild(optionEle) }) } handleChange() $(document).ready(function() { var selectMenu = []; $("button").click(function() { selectMenu.push($("#type_select option:selected").attr('label')); $(".result").html(selectMenu.join('<br>')); }); });

 <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" class="btn btn-secondary">Order</button> <br> <br> <div class="result text-center"></div>

Answer 1

You can add attribute inside your option tag with name data-price this will have price value and then show same.

Demo Code :

 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.setAttribute('data-price', option.price)//atr with price optionEle.label = option.name dataSelect.appendChild(optionEle) }) } handleChange() $(document).ready(function() { var selectMenu = []; $("button").click(function() { //get price and name from selected options selectMenu.push($("#type_select option:selected").attr('label') +" = "+$("#type_select option:selected").data('price')); $(".result").html(selectMenu.join('<br>')); }); });

 <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" class="btn btn-secondary">Order</button> <br> <br> <div class="result text-center"></div>