Изменение значения второго выпадающего меню на основе выбора из другого

Question

У меня есть два раскрывающихся меню для возраста, возраста и возраста до. Значения в пределах этих спадов варьируются от 17 до 50.

Если при первом выпадающем списке пользователь выбирает 25, то во втором поле пользователь может выбрать значение, меньшее, чем то, что не было бы идеальным, и это не имело бы смысла. Есть ли способ получить второе падение вниз, чтобы начать после выбора с первого выпадающего списка? Поэтому, если пользователь выбирает возраст 25 с первого снижения, второй снимок будет начинаться с 26.

Как дополнительная проверка, пользователь может сначала перейти на второй снимок, выбрав опцию, которая приведет к аннулированию вышеуказанной проверки. В таком случае существует ли возможность включить только второй снимок после первого выбора?

Вот как определяются мои капли спады:

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

Попробуйте это, вы не можете иметь один без другого :

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> 

Версия 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> 

Версия 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

Попробуйте следующий код:

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>