無法使用JSON數據填充多個下拉菜單，沒有錯誤

Question

我有一個帶有手表信息的JSON文件。 我想構建一個簡單的表格，允許用戶選擇手表的品牌，然后第二個下拉列表將填充“ Model”中的值，最后一個下拉列表將填充“ Movement”中的值。

我已經建立了我認為正確的東西，只是它不起作用並且沒有錯誤？

HTML

<form name="myform" id="myForm">
    <select name="optone" id="brands" size="1">
        <option value="" selected="selected">Select a brand</option>
    </select>
    <br>
    <br>
    <select name="opttwo" id="model" size="1">
        <option value="" selected="selected">Please select model</option>
    </select>
    <br>
    <br>
    <select name="optthree" id="movement" size="1">
        <option value="" selected="selected">Please select a movement</option>
    </select>
</form>

HTML

  var watches = {
    "Rolex": {
      "Model": [
        "Submariner",
        "Yachtmaster",
        "Oyster",
        "Datejust"
      ],
      "Movement": [
        {
          "label": "OysterDate",
          "Id": "6694"
        },
        {
          "label": "Hulk",
          "Id": "3920"
        },
        {
          "label": "DeepSea",
          "Id": "2342"
        }
      ]
    },
    "Omega": {
      "Model": [
        "Seamaster",
        "Speedmaster",
        "MoonWatch"
      ],
      "Movement": [
      ]
    }
  }


window.onload = function () {
    var brands = document.getElementById("brands"),
        model = document.getElementById("model"),
        movement = document.getElementById("movement");
    for (var brand in watches) {
        brands.options[brands.options.length] = new Option(brands, brands);
    }
    brands.onchange = function () {
        model.length = 1; // remove all options bar first
        testCase.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done
        for (var model in watches[this.value]) {
            model.options[model.options.length] = new Option(model, model);
        }
    }
    brands.onchange(); // reset in case page is reloaded
    model.onchange = function () {
        movement.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done
        var movement = watches[brand.value][this.value];
        alert(movement);
        for (var i = 0; i < movement.length; i++) {
             movement.options[movement.options.length] = new Option(movement, movement);
        }
    }
}

watches();

https://jsfiddle.net/z3xcyprt/3/

Answer 1

試試這個。

在window.onload函數上，您聲明了brands ， model但是在循環中將其覆蓋了。

還請閱讀有關for ... of和for ... in之間的區別

window.onload = function () {
    var brands = document.getElementById("brands"),
        model = document.getElementById("model"),
        movement = document.getElementById("movement");
    for (var brand in watches) {
        brands.options[brands.options.length] = new Option(brand);
    }
    brands.onchange = function () {
        if (this.selectedIndex < 1) return; // done
        for (var modelValue of watches[this.value].Model) {
            model.options[model.options.length] = new Option(modelValue);
        }
    }
    brands.onchange(); // reset in case page is reloaded
    model.onchange = function () {
        if (this.selectedIndex < 1) return; // done
        var movementValue = watches[brands.value].Movement;
        for (var i = 0; i < movementValue.length; i++) {
             movement.options[movement.options.length] = new Option( movementValue[i].label, movementValue[i].Id);
        }
    }
}

watches();

Answer 2

好的，這里有很多問題。 主要是改寫變量名，但for( x in obj)應使用forEach(func())時使用for( x in obj)也會錯誤地導航數組值

還請注意，您在Model和Movement之間沒有JSON的關系，我在腳本中已對此進行了說明，但是您可能希望查看一下。

 var watches = { "Rolex": { "Model": [ "Submariner", "Yachtmaster", "Oyster", "Datejust" ], "Movement": [ { "label": "OysterDate", "Id": "6694" }, { "label": "Hulk", "Id": "3920" }, { "label": "DeepSea", "Id": "2342" } ] }, "Omega": { "Model": [ "Seamaster", "Speedmaster", "MoonWatch" ], "Movement": [ ] } } const createOption = (value, text) => { let opt = document.createElement('option'); opt.value = value; opt.text = text; return opt; }; window.onload = function () { var brands = document.getElementById("brands"), model = document.getElementById("model"), movement = document.getElementById("movement"); for (var brand in watches) { brands.options.add(createOption(brand, brand)); } brands.onchange = function () { model.length = 1; // remove all options bar first if (brands.selectedIndex < 1) return; // done // This is an array of string. watches[brands.value].Model.forEach(m => { model.add( createOption(m, m)); }); } // There is NO link in the JSON between model and movement ? model.onchange = function () { movement.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done watches[brands.value].Movement.forEach(m => { movement.options.add(createOption(m.Id, m.label)); }); } } // This does nothing. //watches(); 

 <form name="myform" id="myForm"> <select name="optone" id="brands"> <option value="" selected="selected">Select a brand</option> </select> <br> <br> <select name="opttwo" id="model"> <option value="" selected="selected">Please select model</option> </select> <br> <br> <select name="optthree" id="movement"> <option value="" selected="selected">Please select a movement</option> </select> </form>