根據另一個菜單的選擇更改第二個下拉菜單的值

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

嘗試以下代碼：

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

Answer 2

試試這個，你不能沒有另一個：

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>