根据另一个下拉菜单中的选择更改第二个下拉菜单的值
Changing the value of a second drop down menu based on selection from another
我有两个下拉菜单,分别是age、age from和age to。这些下拉菜单中的值范围为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>
试试这个,你不能没有另一个:
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>
尝试以下代码:
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>
相关文章:
- 第二个下拉菜单元素上的重复下拉Javascript效果
- 根据另一个下拉菜单中的选择更改第二个下拉菜单的值
- 第一个下拉菜单可自动更改第二个下拉菜单的选项
- 下拉菜单动态填充第二个下拉菜单
- 如何从 php 生成的
- 下拉菜单生成第二个 li 菜单,其中包含 javascript 或 jquery
- 第二个下拉菜单没有立即出现
- JQuery下拉菜单三个层次
- 在jQuery下拉菜单中获取第二个值
- 悬停第二个菜单后,第一个下拉菜单没有关闭
- 引导下拉菜单隐藏在第二个面板体
- jQuery下拉菜单第二次不工作
- 启用第二个下拉菜单一旦某些东西被选中在下拉菜单1
- 基于第一个下拉菜单,禁用第二个下拉菜单
- 级联下拉的第二个下拉没有填充
- 第二个下拉菜单在选择后消失
- 第一个下拉菜单选择第二个和第三个下拉菜单
- 融合表谷歌地图第二个Javascript下拉菜单不工作
- 从第二个下拉菜单中获取描述
- 如何在第一个菜单的基础上刷新第二个隐藏的下拉菜单
- 选择第一个下拉菜单后显示第二个下拉菜单的内容