HTML选择器出现Uncaught TypeError: Cannot read property 'options' of null错误

Question

在我的表单中，有两个选择输入框，第二个选择输入框的值会根据第一个选择输入框的值而改变。

但是，当在第一个选择输入框中选择一个值时，第二个选择输入框未能相应地更新其值。我收到以下错误提示：

Uncaught TypeError: Cannot read property 'options' of null
    at newchangeCategory (managefood:340)
    at HTMLSelectElement.onchange (managefood:273)

以下是表单代码以及根据第一个输入更改第二个选择输入的脚本。我已经在代码中添加了备注，指出了错误所在的行。

<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                     <span aria-hidden="true">&times;</span>
                    </button>
        <h3 class="modal-title" id="newfoodLabel">New Food</h3>
        <br>
        <div>
          <div class="col-sm-12">
            <label for="category" id="newCategoryLabel" style="text-align: left">Category</label>
            <select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control"> //line 273
                                <option value="" disabled selected hidden>Select a category</option>
                                <option value="Fruit">Fruit</option>
                                <option value="Vegetable">Vegetable</option>
                            </select>
          </div>
          <div class="col-sm-12">
            <label for="type" id="newtypeLabel" style="text-align: left">Type</label>
            <select name="type" id="newtype" class="form-control"></select>
          </div>

          //this script enables for the second select to change based on the first - if Fruit is chosen as the category for example, only fruit options are shown in the Type select.
          <script type="text/javascript">
            var typeOptions = {};
            typeOptions['Fruit'] = [
              'Apple',
              'Pear',
              'Banana',
              'Plum',
              'Peach'
            ];
            typeOptions['Vegetable'] = [
              'Broccoli',
              'Carrot',
              'Pumpkin'
            ];

            function newchangeCategory() {
              var categoryChoice = document.getElementById('newcategory');
              var typeChoice = document.getElementById('newtype');
              var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340
              console.log(selectedCategoryChoice);
              while (typeChoice.options.length) {
                typeChoice.remove(0);
              }
              var typesAvailable = typeOptions[selectedCategoryChoice];
              if (typesAvailable) {
                var i;
                for (i = 0; i < typesAvailable.length; i++) {
                  var type = new Option(typesAvailable[i], typesAvailable[i]);
                  typeChoice.options.add(type);
                }
              }
            };
          </script>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                    </button>
        <button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes
                    </button>
      </div>
    </div>
  </div>
</div>

- mistaq

---

我认为是因为 typeChoice 没有选项，所以 typeChoice.options.length 导致了错误。 - Ali Sheikhpour

Answer 1

由于一个小拼写错误，导致它无法工作，请查看HTML中给出的类别ID和您在脚本中使用的ID。

var categoryChoice = document.getElementById('newCategory');

请使用大写字母"C"的newCategory。

- Lalit Sachdeva

---

是的，问题已解决，我想我忽略了这么简单的错误。 - mistaq

很好，是的，它非常微小，不值一提。谢谢！ - Lalit Sachdeva

Answer 2

在大写字母的问题上，需要在js代码中将newcategory更改为newCategory：

因此，该行应为var categoryChoice = document.getElementById('newCategory');

工作示例：

var typeOptions = {};
typeOptions['Fruit'] = [
  'Apple',
  'Pear',
  'Banana',
  'Plum',
  'Peach'
];
typeOptions['Vegetable'] = [
  'Broccoli',
  'Carrot',
  'Pumpkin'
];

function newchangeCategory() {
  //here you make the change newCategory iinstead of newcategory
  var categoryChoice = document.getElementById('newCategory');
  var typeChoice = document.getElementById('newtype');
  var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340
  console.log(selectedCategoryChoice);
  while (typeChoice.options.length) {
    typeChoice.remove(0);
  }
  var typesAvailable = typeOptions[selectedCategoryChoice];
  if (typesAvailable) {
    var i;
    for (i = 0; i < typesAvailable.length; i++) {
      var type = new Option(typesAvailable[i], typesAvailable[i]);
      typeChoice.options.add(type);
    }
  }
};

<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                 <span aria-hidden="true">&times;</span>
                </button>
        <h3 class="modal-title" id="newfoodLabel">New Food</h3>
        <br>
        <div>
          <div class="col-sm-12">
            <label for="category" id="newCategoryLabel" style="text-align: left">Category</label>
            <select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control"> //line 273
                            <option value="" disabled selected hidden>Select a category</option>
                            <option value="Fruit">Fruit</option>
                            <option value="Vegetable">Vegetable</option>
                        </select>
          </div>
          <div class="col-sm-12">
            <label for="type" id="newtypeLabel" style="text-align: left">Type</label>
            <select name="type" id="newtype" class="form-control"></select>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                </button>
        <button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes
                </button>
      </div>
    </div>
  </div>
</div>

- Bourbia Brahim

---

谢谢。那个代码片段功能似乎也非常有用。 - mistaq