オプションを追加した後、選択ボックスが更新されていない

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>

動作するようになっています方法は、誰かが主なカテゴリを選択すると、サブカテゴリー選択ボックスを移入されるということです。 これを行うより良い方法があると思うなら教えてください。私はちょうど7hrsのためにすべての助けが歓迎されているので、javascriptでプログラミングしてきました。

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>