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

另外请注意，您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>

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

2 个答案: