他の選択値に基づいて選択オプションを非表示および表示

Question

このフォームにはいくつかの選択ドロップダウンがあり、選択した内容に基づいて他のドロップダウンを表示および非表示にします。値Allを選択すると、geoセレクトが選択された値に反応しますが、値Testを選択すると、function familyセレクトは消えません。理由は何ですか？

また、テストを選択した場合、function familyの値を0に割り当てる必要があります。ヘルプをいただければ幸いです。

メイン選択：

<select name="scope" onchange="javascript:sync_scope()"> 
          <option value="1">All </option> 
          <option value="10">Test</option> 
         </select> 

Javascriptを：

function sync_scope() { 
     var scope = document.form.scope.value; 
     document.form.geo.style.display = (scope == "1") ? "block" : "none";  
     document.form.function_family.style.display = (scope == "10") ? "none" : "block"; 

    } 

HTML

<select name="geo"> 
    <?php foreach ($geos as $geo) : ?> 
     <option value="<?php echo $geo['id']; ?>"><?php echo utf8_encode($geo['name']); ?></option> 
    <?php endforeach; ?> 
</select> 

<select name="function_family" id ="function_family"> 
<option value="0" <?php selected($function_family, 0); ?>>All functions</option> 
<?php foreach ($functions as $function) : ?> 
    <option value="<?php echo $function['id']; ?>"><?php echo utf8_encode($function['name']); ?></option> 
<?php endforeach; ?> 
</select> 

Answer 1

あなたの条件2番目のオプションで間違っている場合：

function sync_scope() { 
     var scope = document.form.scope.value; 
     document.form.geo.style.display = (scope == "1") ? "block" : "none";  
     document.form.function_family.style.display = (scope == "10") ? "none" : "block"; 

    } 

は次のようになります。スコープは、これを追加するには10に等しいとき

document.form.function_family.value = 0; 

をあなたがよりよい代わりであれば、明示的に記述します：また、ちょうど行う特定の値を選択するためのロジックを適用するには

function sync_scope() { 
     var scope = document.form.scope.value; 
     document.form.geo.style.display = (scope == "1") ? "block" : "none";  
     document.form.function_family.style.display = (scope == "10") ? "block" : "none"; 

    } 

三項演算子を使用する方法：この方法で、一度スコープの値をチェックし、同時にすべての論理を適用します。

Answer 2

<select id="mySelect" onchange="myFunction()"> 
    <option value="Audi">Audi 
    <option value="BMW">BMW 
</select> 

<script> 
    function myFunction() { 
     var scope = document.getElementById("mySelect").value; 
     if (scope == "Audi") { 
      document.getElementById("geo").style.display = "block";  
      document.getElementById("function_family").style.display = "none"; 
     } else if (scope == "BMW") { 
      document.getElementById("geo").style.display = "none";  
      document.getElementById("function_family").style.display = "block"; 
     } 
    } 
</script> 

<select id="geo"> 
    <option value="1">1 
    <option value="2">2 
</select> 
<select id="function_family"> 
    <option value="3">3 
    <option value="4">4 
</select>