未捕获的TypeError:无法读取HTML选择的null属性“选项" [英] Uncaught TypeError: Cannot read property 'options' of null for HTML select

问题描述

在我的表单中，我有两个选择输入，其中第二个选择根据第一个选择输入更改其值.

In my form I have two select inputs, in which the second select changing its values depending on the first select input.

但是，当在第一个选择输入中选择一个值时，第二个选择输入无法相应地更新其值.我收到错误消息:

However, when selecting a value in the first select input, the second select input fails to update its values accordingly. I get the error:

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

下面是表单的代码，以及基于第一个选择输入更改第二个选择输入的脚本.我已经在代码中注释了上面提到的错误.

Below is the code for the form, as well as the script that changes the second select input based on what is given in the first. I've commented in the code which lines the error above refer to.

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

推荐答案

它不起作用的原因是一个小的拼写错误，请查看HTML中给定的类别ID，以及您在脚本中使用的类别ID

The reason why it was not working is that of one small spelling mistake, please have a look at the category id given in HTML and used by you in the script

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

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

Please use newCategory with capital "C".

这篇关于未捕获的TypeError:无法读取HTML选择的null属性“选项"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！