不能填充多个下拉菜单使用JSON数据，没有错误

Question

我有手表信息的JSON文件。我想建立一个简单的形式，它允许用户选择一个品牌的手表，然后第二个下拉将与“模型”，最终下拉列表中的值将与价值观“运动”中填入填充。

我已经建立了我认为是正确的只有它不工作，我没有得到任何错误？

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

好了，有很多的问题在这里。主要在写你的变量名，而且阵值不正确的导航，使用for( x in obj)时，你应该使用forEach(func())

还要注意，JSON没有我在剧本注意到这个Model和Movement之间的关系，但你可能会想看看那个。

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>

Answer 2

试试这个。

在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();