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>

根据另一个下拉菜单的选择更改第二个下拉菜单的值

2 个答案: