基於從另一個選擇更改第二個下拉菜單的值

我有兩個下拉菜單的年齡，年齡從和年齡到。這些下降值範圍從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

基於從另一個選擇更改第二個下拉菜單的值

回答

相關問題