显示 json 数据到 select 选项

Question

When I click the select option the result is that all the data is being combined into one row. I want to change it so that the data would fill each row from select option.

Any suggestions on what code I should change or add? Is it from the loop or do I need to create a dynamic id for the select option?

 var json = { "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" }] }; var str = '<select>'; for (var i = 0; i < json.Food.length; i++) { str += '<option value="' + json.Food[i].id + '"+ class="food">' + json.Food[i].name + '</option> '; } str += '</select>'; $(".food").html(str) var str = '<select>'; for (var i = 0; i < json.Food.length; i++) { str += '<option value="' + json.Drink[i].id + '"+ class="drink">' + json.Drink[i].name + '</option>'; } str += '</select>'; $(".drink").html(str)

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="container"> <div class="container-fluid text-center"> <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2> <div class="row"> <div class="col-md-6"> <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> <option selected>Open Food Menu</option> <option value="1" class="food"></option> </select> </div> <div class="col-md-6"> <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> <option selected>Open Drink Menu</option> <option value="1" class="drink"></option> </select> </div> </div> </div> </div>

Answer 1

Your current code is trying to create brand new select elements and append them to the existing option elements. Instead you just need to create a new list of option and append them to the existing select . You can use map() to do this more effectively. Note that I moved the .food and .drink class locations to the select elements.

let foodOptions = data.Food.map(o => `<option value="${o.id}">${o.name}</option>`);
$('select.food').append(foodOptions);

let drinkOptions = data.Drink.map(o => `<option value="${o.id}">${o.name}</option>`);
$('select.drink').append(drinkOptions);

This can be extended further in to a function to reduce code repetition. See this in action in the following snippet:

 let 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"}]}; let createOptions = (arr, targetSelector) => $(targetSelector).append(arr.map(o => `<option value="${o.id}">${o.name}</option>`)); createOptions(data.Food, 'select.food'); createOptions(data.Drink, 'select.drink');

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="container"> <div class="container-fluid text-center"> <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2> <div class="row"> <div class="col-md-6"> <select class="form-select form-select-lg mb-3 food" aria-label=".form-select-lg example"> <option selected>Open Food Menu</option> </select> </div> <div class="col-md-6"> <select class="form-select form-select-lg mb-3 drink" aria-label=".form-select-lg example"> <option selected>Open Drink Menu</option> </select> </div> </div> </div> </div>

As an aside, note that the data is held in a JS object, not JSON. I renamed the variable to better match the data structure being used.

Answer 2

The line $(".drink").html(str) is adding the html you have built up inside the existing list, so you get something like this

<select>
  <option>
  <option>
    <select><option>....

You should really add elements directly to the DOM using a fragment, instead of building up HTML. It is a lot more efficient.

For example:

var food = $(".food");
var frag = document.createDocumentFragment();

for (var i = 0; i < json.Food.length; i++) {
    let option = document.createElement("option");
    option.value = json.Food[i].id;
    option.className = "food";
    option.text = json.Food[i].name;
    frag.appendChild(option);
}

food.appendChild(frag);