在我为其添加一个选项JavaScript之后，选择“盒子”未更新

Question

基本上，我在选择框中添加了一个选项，而在选项阵列中添加数据时，新添加的选项不会出现在屏幕上：这是我的代码的jfiddle：https：//jsfiddle.net/6u383mgj/。

$(document).ready(function() {
  $('.modal').modal();
});
$(document).ready(function() {
  $('select').material_select();
});
function CategoryChange() {
  var y = document.getElementById("plid");
  for (var i = 0; i < 8; i++) {
    if (y.length > 1) {
      y.remove(y.length - 1);
    }
  }
  var categoriesvar = document.getElementById("category");
  var value = categoriesvar.options[categoriesvar.selectedIndex].value;
  alert(value);
  if (value == "Prop") {
    dropdownforprop();
    var x = document.getElementById("plid");
    alert(x.options[2].value);
  } else if (value == "Software") {
    dropdownforsoft();
    var x = document.getElementById("plid");
    alert(x.options[2].value);
  } else if (value == "Arts") {
    dropdownforarts();
    var x = document.getElementById("plid");
    alert(x.options[2].value);
  }
};
function dropdownforprop() {
  var select = document.getElementById('plid');
  select.options[0].innerHTML = "What type of prop are you looking for?";
  select.options[select.options.length] = new Option('Electronic', 'Electronic');
  select.options[select.options.length] = new Option('Wooden', 'Wooden');
  select.options[select.options.length] = new Option('Metal', 'Metal');
  select.options[select.options.length] = new Option('Clothes', 'Clothes');
}
function dropdownforsoft() {
  var select = document.getElementById('plid');
  select.options[0].innerHTML = "What language are you looking for?";
  select.options[select.options.length] = new Option('Assembly', 'Assembly');
  select.options[select.options.length] = new Option('C#', 'C#');
  select.options[select.options.length] = new Option('C++', 'C++');
  select.options[select.options.length] = new Option('Java', 'Java');
  select.options[select.options.length] = new Option('JavaScript', 'JavaScript');
  select.options[select.options.length] = new Option('Ruby', 'Ruby');
  select.options[select.options.length] = new Option('Python', 'Python');
  select.options[select.options.length] = new Option('VHDL', 'VHDL');
}
function dropdownforarts() {
  var select = document.getElementById('plid');
  select.options[0].innerHTML = "What type of arts are you looking for?";
  select.options[select.options.length] = new Option('Music', 'Music');
  select.options[select.options.length] = new Option('Painting', 'Painting');
  select.options[select.options.length] = new Option('Poster', 'Poster');
  select.options[select.options.length] = new Option('Sculptures', 'Sculptures');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s6">
  <select id="category" name="Categories" onchange="CategoryChange()">
                <option value="" disabled selected>Choose a category</option>
                <option value="Arts">Arts</option>
                <option value="Prop">Prop</option>
                <option value="Software">Software</option>
              </select>
  <label>Category</label>
</div>
<div class="input-field col s6">
  <select id="plid">
                <option value="" disabled selected>You must choose a category first</option>
              </select>
  <label id="subcategorylabel">Sub-Category</label>
</div>

它应该工作的方式是，当某人选择主要类别时，将填充子类别选择框。如果您认为有更好的方法可以做到这一点。我一直在使用JavaScript进行编程，正好为7小时，因此欢迎所有帮助。

Answer 1

我对jsfiddle不了解，但看起来像是错误的。

如果您在定义代码的位置更改了一点，则所有这些都可以正常工作。

  <script>
      function  CategoryChange(){
    var y = document.getElementById("plid");
    for(var i=0;i<8;i++){
      if (y.length > 1) {
      y.remove(y.length-1);
  }}
    var categoriesvar = document.getElementById("category");
    var value = categoriesvar.options[categoriesvar.selectedIndex].value;
      alert(value);
      if(value=="Prop"){
        dropdownforprop();
        var x = document.getElementById("plid");
        alert(x.options[2].value);
     }
     else if (value=="Software"){
       dropdownforsoft();
       var x = document.getElementById("plid");
       alert(x.options[2].value);
    }
     else if(value=="Arts"){
       dropdownforarts();
         var x = document.getElementById("plid");
         alert(x.options[2].value);
      }
  };
function dropdownforprop(){
      var select = document.getElementById('plid');
      select.options[0].innerHTML="What type of prop are you looking for?";
      select.options[select.options.length] = new Option('Electronic', 'Electronic');
      select.options[select.options.length] = new Option('Wooden', 'Wooden');
      select.options[select.options.length] = new Option('Metal', 'Metal');
      select.options[select.options.length] = new Option('Clothes', 'Clothes');
}
function dropdownforsoft(){
    var select = document.getElementById('plid');
  select.options[0].innerHTML="What language are you looking for?";
  select.options[select.options.length] = new Option('Assembly', 'Assembly');
  select.options[select.options.length] = new Option('C#', 'C#');
  select.options[select.options.length] = new Option('C++', 'C++');
  select.options[select.options.length] = new Option('Java', 'Java');
  select.options[select.options.length] = new Option('JavaScript', 'JavaScript');
  select.options[select.options.length] = new Option('Ruby', 'Ruby');
  select.options[select.options.length] = new Option('Python', 'Python');
  select.options[select.options.length] = new Option('VHDL', 'VHDL');
}
function dropdownforarts(){
    var select = document.getElementById('plid');
  select.options[0].innerHTML="What type of arts are you looking for?";
  select.options[select.options.length] = new Option('Music', 'Music');
  select.options[select.options.length] = new Option('Painting', 'Painting');
  select.options[select.options.length] = new Option('Poster', 'Poster');
  select.options[select.options.length] = new Option('Sculptures', 'Sculptures');
}
  </script>
  <div class="input-field col s6">
              <select id="category" name="Categories" onchange="CategoryChange()">
                <option value="" disabled selected>Choose a category</option>
                <option value="Arts">Arts</option>
                <option value="Prop">Prop</option>
                <option value="Software">Software</option>
              </select>
              <label>Category</label>
            </div>
            <div class="input-field col s6">
              <select id="plid" >
                <option value="" disabled selected>You must choose a category first</option>
              </select>
              <label id="subcategorylabel">Sub-Category</label>
            </div>