[英]Changing the value of a second drop down menu based on selection from another
I have two drop down menu's for age, age from, and age to. 我有两个下拉菜单,分别是年龄,年龄从和年龄到。 Values within these drop downs range from 17-50. 这些下拉列表中的值范围为17-50。
If from the first drop down, a user selects 25
then in the second box, the user can choose a value lower than that which would not be ideal, nor would it make sense. 如果用户从第一个下拉列表中选择25
则在第二个框中,用户可以选择一个比理想值还要低的值,也没有任何意义。 Is there a way to get the second drop down to begin after the selection from the first drop down? 从第一个下拉菜单中进行选择之后,是否有办法让第二个下拉菜单开始? So if a user selects age 25
from the first drop down, the second drop down would begin from 26
. 因此,如果用户从第一个下拉列表中选择年龄25
,则第二个下拉列表将从26
开始。
Just as a further check, a user may go onto the second drop down first, selecting an option which would invalidate the above check. 正如进一步检查一样,用户可以先进入第二个下拉菜单,选择一个会使上述检查无效的选项。 In such a case, is there also a way to only enable to second drop down after the first one has been selected? 在这种情况下,是否还有一种方法只能在选择第一个下拉菜单后才允许第二个下拉菜单?
Here is how my drop downs are defined: 这是我的下拉菜单的定义方式:
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>
Try the following code: 尝试以下代码:
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>
Try this, you can't have one without the other: 试试这个,你不能没有另一个:
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 版本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 版本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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.