Ändern des Wertes eines zweiten Dropdown-Menüs basierend auf der Auswahl eines anderen

Question

Ich habe zwei Dropdown-Menüs für Alter, Alter von und Alter bis. Die Werte innerhalb dieser Dropdown-Bereiche reichen von 17-50.

Wenn von der ersten Dropdown-Liste ein Benutzer 25 auswählt, dann kann der Benutzer in der zweiten Box einen Wert wählen, der niedriger als der Wert ist, der nicht ideal wäre, noch würde es Sinn ergeben. Gibt es eine Möglichkeit, den zweiten Drop-Down nach der Auswahl aus dem ersten Drop-Down zu starten? Wenn also ein Benutzer das Alter 25 aus dem ersten Dropdown wählt, würde das zweite Drop-Down von 26 beginnen.

Nur als weitere Überprüfung kann ein Benutzer zuerst auf die zweite Dropdown-Liste gehen und eine Option auswählen, die die obige Überprüfung ungültig machen würde. Gibt es in einem solchen Fall auch die Möglichkeit, erst nach der Auswahl des ersten Drop-Downs einen zweiten Drop-Down zu ermöglichen?

Hier ist, wie meine Drop-downs definiert sind:

Age from: 
          <select> 
          <option value="none"></option> 
           <?php 
            for ($i=17; $i<=50; $i++) 
            { 
             ?> 
              <option value="<?php echo $i;?>"><?php echo $i;?></option> 
             <?php 
            } 
           ?> 
           </select> 
           to: 
          <select> 
          <option value="none"></option> 
           <?php 
            for ($i2=18; $i2<=50; $i2++) 
            { 
             ?> 
              <option value="<?php echo $i2;?>"><?php echo $i2;?></option> 
             <?php 
            } 
           ?> 
           </select> 

Answer 1

die Sie interessieren, können Sie nicht ohne das andere haben kann :

Age from: 
<select id="age_a" onchange="checkages_a()"> 
    <option value="none"></option> 
<?php 
    for($i = 17; $i <= 49; ++$i) { 
     echo "\t", '<option value="', $i, '">', $i, '</option>', "\n"; 
    } 
?> 
</select> 
to: 
<select id="age_b" onchange="checkages_b()"> 
    <option value="none"></option> 
<?php 
    for($i = 18; $i <= 50; ++$i) { 
     echo "\t", '<option value="', $i, '">', $i, '</option>', "\n"; 
    } 
?> 
</select> 

Version A

<script type="text/javascript"> 
var age_a = document.getElementById("age_a"); 
var age_b = document.getElementById("age_b"); 

function checkages_a() { 
    var a = typeof(age_a.options[age_a.selectedIndex]) !== 'undefined' ? age_a.options[age_a.selectedIndex].value : 0; 
    var b = typeof(age_b.options[age_b.selectedIndex]) !== 'undefined' ? age_b.options[age_b.selectedIndex].value : 0; 
    if(b == 'none' || a > b) 
     age_b.selectedIndex = age_a.selectedIndex - 1; 
} 

function checkages_b() { 
    var a = typeof(age_a.options[age_a.selectedIndex]) !== 'undefined' ? age_a.options[age_a.selectedIndex].value : 0; 
    var b = typeof(age_b.options[age_b.selectedIndex]) !== 'undefined' ? age_b.options[age_b.selectedIndex].value : 0; 
    if(!b || b == 'none') 
     age_b.selectedIndex = age_a.selectedIndex - 1; 
    if(a == 'none' || b < a) 
     age_a.selectedIndex = age_b.selectedIndex + 1; 
} 
</script> 

Version B

<script type="text/javascript"> 
var age_a = document.getElementById("age_a"); 
var age_b = document.getElementById("age_b"); 

function checkages_a() { 
    var a = typeof(age_a.options[age_a.selectedIndex]) !== 'undefined' ? age_a.options[age_a.selectedIndex].value : 0; 
    var b = typeof(age_b.options[age_b.selectedIndex]) !== 'undefined' ? age_b.options[age_b.selectedIndex].value : 0; 
    if(b == 'none' || a >= b) 
     age_b.selectedIndex = age_a.selectedIndex; 
} 

function checkages_b() { 
    var a = typeof(age_a.options[age_a.selectedIndex]) !== 'undefined' ? age_a.options[age_a.selectedIndex].value : 0; 
    var b = typeof(age_b.options[age_b.selectedIndex]) !== 'undefined' ? age_b.options[age_b.selectedIndex].value : 0; 
    if(!b || b == 'none') 
     age_b.selectedIndex = age_a.selectedIndex; 
    if(a == 'none' || b <= a) 
     age_a.selectedIndex = age_b.selectedIndex; 
} 
</script> 

Answer 2

den folgenden Code Versuchen:

From: 
 
\t \t \t <select id='select1'> 
 
\t \t \t \t <option value="none" SELECTED>Select an Age</option> 
 
\t \t \t \t <option value="5">5</option> 
 
           <option value="7">7</option> 
 
\t \t \t \t <?php 
 
\t \t \t \t \t for ($i=17; $i<=50; $i++) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t ?> 
 
\t \t \t \t \t \t <option value="<?php echo $i;?>"><?php echo $i;?></option> 
 
\t \t \t \t \t <?php 
 
\t \t \t \t \t } 
 
\t \t \t \t ?> 
 
\t \t \t </select> 
 
\t To: 
 
\t \t \t <select id='select2'> 
 
\t \t \t <option value="none">Select an Age</option> 
 
\t \t \t  
 
\t \t \t </select> 
 
\t \t \t 
 
<script> 
 
\t var sel1 = document.getElementById('select1'); 
 
\t var sel2 = document.getElementById('select2'); 
 
\t 
 
\t sel1.onchange = function(event) 
 
\t { 
 
\t \t var age = sel1.value|0; 
 
\t \t 
 
\t \t var max_age = 90; 
 
\t \t 
 
\t \t for(var i=sel2.options.length-1;i>0;--i) 
 
\t \t { 
 
\t \t \t sel2.remove(i); 
 
\t \t } 
 
\t \t 
 
\t \t if(age === 0 || isNaN(age) === true) 
 
\t \t \t return; 
 
\t \t 
 
\t \t for(var i=age;i<=max_age;++i) 
 
\t \t { 
 
\t \t \t var opt = document.createElement('option'); 
 
\t \t \t opt.text = i; 
 
\t \t \t opt.value = i; 
 
\t \t \t sel2.add(opt); 
 
\t \t } 
 
\t } 
 
</script>