基于从另一个选择更改第二个下拉菜单的值

我有两个下拉菜单的年龄，年龄从和年龄到。这些下降值范围从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>

来源

2016-03-30 Freddy

从可用性的角度来看，我只建议萎靡不振时，他们都被选中，并没有任何意义，而不是禁用。禁用可防止用户按任何顺序更正它们。 – abluejelly

这不是[范围滑块]的完美例子吗（http://demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/sliders/rangeslider.html）？ – Miro

试试这个，你不能有一个没有其他：

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>

来源

2016-03-31 00:25:33 Brogan

嗨，这工作到目前为止很好。有没有办法调整这一点？例如，如果我先从“age_b”中选择值“22”，那么“age_a”也将具有值“22”。有没有办法获得它，所以如果首先从'age_b'中选择一个值，那么'age_a'将始终为-1，从'age_b'的值即21。我基本上不希望有两个相同的数字值一次可见。 – Freddy

你在这里，哥们！尝试版本B，看看你是否更喜欢这些结果。 – Brogan

经过一番调整之后，我将其简化为仅将第一个框更改为49，然后从函数中删除+1和-1以获得您所追踪的结果。 – Brogan

试试下面的代码：

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>

来源

2016-03-30 23:51:29 henry700

基于从另一个选择更改第二个下拉菜单的值

回答

相关问题