Ausblenden und anzeigen wählen Option basierend auf anderen wählen Wert

Question

Ich habe dieses Formular mit ein paar Auswahl Dropdowns und basierend auf was wir auswählen, zeigen wir und andere Dropdown-Menüs ausblenden. Wenn ich den Wert All wähle, dann reagiert die geo Auswahl auf den ausgewählten Wert, aber wenn ich den Wert Test wähle, verschwindet die function family Auswahl nicht. Irgendein Grund warum?

Ich muss auch den Wert von function family zu 0 zuweisen, wenn der Test ausgewählt ist. Hilfe wäre willkommen.

Der Haupt wählen:

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

    } 

Die 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

Ihr, wenn die Bedingung in der zweiten Option ist falsch:

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

    } 

sein sollte:

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

    } 

auch die Logik anwenden tun einen bestimmten Wert wählen Sie einfach:

document.form.function_family.value = 0; 

wenn Umfang 10. entspricht dies Sie besser, wenn dies ausdrücklich stattdessen schreiben würde hinzufügen Verwendung des ternären Operators: Auf diese Weise überprüfen Sie einmal den Wert des Bereichs und Sie wenden alle Logik gleichzeitig an

Answer 2

Bitte versuchen Sie dies,

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