Question

如果我把javascript放在它显示的html文件上，就像这样：

<select class="inputField" id="selectTopping0" ></select>

<script type="text/javascript">
    var myDiv = document.getElementById("selectTopping0");
    var dishArray = [
{id:0, name: "Beef Teriyaki", type: "mainDish", price:100},
{id:1, name: "Onigiri", type: "sideDish", price: 80},
{id:2, name: "Miso Soup", type: "soup", price: 50},
{id:3, name: "Vegetable Soup", type: "soup", price: 40},
{id:4, name: "Kinpira Gobo", type: "sideDish", price: 70},
{id:5, name: "Chicken Katsu", type: "mainDish", price: 110},];
for (i = 0; i < dishArray.length; i++) {
    // create an option that will be added to the 'dishSelect'
    if ('sideDish' == dishArray[i].type) {
        var optionItem = document.createElement("option");
        optionItem.text = dishArray[i].name;
        optionItem.setAttribute("value", dishArray[i].id);
        optionItem.setAttribute("data-price", dishArray[i].price);
        optionItem.setAttribute("data-type", dishArray[i].type);
        myDiv.add(optionItem);
    }
}</script>

但是当我把它放在.js文件中时，它就不再显示了，就像这样：

bentoCustomize.js

function initCustomizeBentoScreen() {
console.log("bentoCustomize.initCustomizeBentoScreen" + " start");
    document.getElementById("bentoName").value = "";
    var mainDishSelect = document.getElementById("selectTopping0");
    populateSelect(mainDishSelect, "mainDish");
    mainDishSelect.selectedIndex = 0;

console.log("bentoCustomize.initCustomizeBentoScreen" + " end");
}

function populateSelect(dishSelect, distType){
console.log("bentoCustomize.populateSelect" + "start");

            // Create and append the options
            for (var i = 0; i < dishArray.length; i++) {

                if(dishArray[i].type == distType){
                    var optionItem = document.createElement("option");
                    optionItem.text = dishArray[i].name;
                    optionItem.setAttribute("value", dishArray[i].id);
                    optionItem.setAttribute("data-price", dishArray[i].price);
                    optionItem.setAttribute("data-type", dishArray[i].type);
                    dishSelect.add(optionItem);
                }


            }


console.log("bentoCustomize.populateSelect " + "end");
}

该数组位于另一个js文件 bentoMain.js

中

var dishArray = [
{id:0, name: "Beef Teriyaki", type: "mainDish", price:100},
{id:1, name: "Onigiri", type: "sideDish", price: 80},
{id:2, name: "Miso Soup", type: "soup", price: 50},
{id:3, name: "Vegetable Soup", type: "soup", price: 40},
{id:4, name: "Kinpira Gobo", type: "sideDish", price: 70},
{id:5, name: "Chicken Katsu", type: "mainDish", price: 110},    
];

数组不在任何函数内

view.html

<script src="../js/bentoMain.js"></script>
<script src="../js/bentoCustomize.js"></script>

Answer 1

var myDiv = document.getElementById("selectTopping0");
    var dishArray = [
{id:0, name: "Beef Teriyaki", type: "mainDish", price:100},
{id:1, name: "Onigiri", type: "sideDish", price: 80},
{id:2, name: "Miso Soup", type: "soup", price: 50},
{id:3, name: "Vegetable Soup", type: "soup", price: 40},
{id:4, name: "Kinpira Gobo", type: "sideDish", price: 70},
{id:5, name: "Chicken Katsu", type: "mainDish", price: 110},];
      
      for (i = 0; i < dishArray.length; i++) {
    // create an option that will be added to the 'dishSelect'
    if ('sideDish' == dishArray[i].type) {
        var optionItem = document.createElement("option");
        optionItem.text = dishArray[i].name;
        optionItem.setAttribute("value", dishArray[i].id);
        optionItem.setAttribute("data-price", dishArray[i].price);
        optionItem.setAttribute("data-type", dishArray[i].type);
        myDiv.add(optionItem);
    }
}

<select class="inputField" id="selectTopping0" ></select>

而不是

myDiv.add(optionItem);

使用此：

myDiv.appendChild(optionItem);

试试吧。希望它能起作用

Answer 2

请设置js文件的sequance 第一个文件是bentoMain.js使数组全局第二个文件是bentoCustomize.js

我无法在javascript中显示select选项

2 个答案: