Uncaught TypeError：無法讀取HTML的屬性'選項'null選擇

在我的表單中，我有兩個選擇輸入，其中第二個選擇根據第一個選擇輸入更改其值。Uncaught TypeError：無法讀取HTML的屬性'選項'null選擇

但是，當在第一個選擇輸入中選擇一個值時，第二個選擇輸入無法相應地更新其值。我得到的錯誤：

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>

來源

2017-06-13 mistaq

我認爲，因爲typeChoice沒有選項，所以typeChoice.options.length會導致錯誤。 –

的它不是w的原因是工作會有，因爲一個小的拼寫錯誤，請對在HTML中給出腳本中使用你

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

請使用newCategory資本「C」類ID的樣子。

來源

2017-06-13 08:41:50

是的，固定它，猜我忽略了這樣一個簡單的錯誤。 – mistaq

不錯，是的，這是非常小的事情，謝謝！ –

Probleme在大寫字符，變化newcategory通過newCategory在JS代碼：太行會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>

來源

2017-06-13 08:41:10

謝謝。該代碼片段功能似乎也非常有用。 – mistaq

不客氣:) –

Uncaught TypeError：無法讀取HTML的屬性'選項'null選擇

回答

相關問題