選択されたものに基づいてコンボボックスのオプションを制限する

Question

私は昨日同様の質問をしましたが、それ以来解決策が出てこなかったので、もっと妥当と思われるロジックに少し行きました働く しかし、それはしませんでした。 どのオプションが事前選択されているかに応じて、ユーザーが利用できるコンボボックスには2つのオプションしかありません。例えば

<SELECT class=caixas id=cbostatus style="WIDTH: 3cm;" tabIndex=25 name=cbostatus onchange= "StatusTest(); hideField();" > 
          <option selected></option> 
          <option value="Planned" id="optionPlanned" <?php if ($row['task_status']=='Planned') echo 'selected="selected"';?>>Planned</option> 
          <option value="Started" id="Started" <?php if ($row['task_status']=='Started') echo 'selected="selected"';?>>Started</option> 
          <option value="Available" id="Available" <?php if ($row['task_status']=='Available') echo 'selected="selected"';?>>Available</option> 
          <option value="Finished" id="Finished" <?php if ($row['task_status']=='Finished') echo 'selected="selected"';?>>Finished</option> 
          <option value="Impeded" id="Impeded" <?php if ($row['task_status']=='Impeded') echo 'selected="selected"';?>>Impeded</option> 
         </SELECT> 

、選択されたときに、「計画」、唯一の他の利用可能なオプションは、「開始」する必要があります。ここではコンボボックスです。そこで、私は行って、OnchangeイベントのためにJavaScriptを作った。そういうわけで。

function hideField(){ 
var e = document.getElementById("cbostatus"); 
var strUser = e.options[e.selectedIndex].value; 

if(strUser == 'Planned') { 
    document.getElementById("Impeded").style.display = 'none'; 
    document.getElementById("Available").style.display = 'none'; 
    document.getElementById("Finished").style.display = 'none'; 
} 
} 

何らかの理由で間違っている。何か案は？ （これまでに使ったことがないので、これを学ぶ時間がないので、Jqueryの使用を提案していないのであれば事前に回答しておきます）

Answer 1

空のセレクトから始め、オプションを動的に

var e=document.getElementById("cbostatus"); 
var strUser = 'Planned'; // get this value from somewhere, maybe a hidden field 
if(strUser == 'Planned') { 
    e.options[e.length]=new Option("Planned", "optionPlanned", true, true); 
    e.options[e.length]=new Option("Started", "Started"); 
} else if .. 

Answer 2

このコードを使用してください。

Html 
<select class=caixas id=cbostatus style="WIDTH: 3cm;" tabIndex=25 name=cbostatus> 
    <option selected></option> 
</select> 

jQuery 
var insertoption = ""; 

最初のこれはあなたのオプション

を作成し、今私は、計画から開始に行けば、意志のonchange機能

$("#cbostatus").on("change",function() 
{ 
    if($("#cbostatus").val() == "Planned") 
    { 
    $("#cbostatus").children().remove(); 
    insertoption = "<option value='Started' id='Started'>Started</option>"; 
    $("#cbostatus").append(insertoption); 
    } 
});