javascript下拉列表驗證

我有兩個下拉列表來選擇從0到23的值。我想要的是，當用戶從第一個列表中選擇一個值時，他不能選擇一個低於此值的值在第二個名單。javascript下拉列表驗證

我應該如何通過javascript在這裏添加驗證？！

<select name="hourfrom"> 
    <option value="0" @(Request["hourfrom"] == "0" ? " selected=\"selected\"" : "") >0</option> 
    <option value="1" @(Request["hourfrom"] == "1" ? " selected=\"selected\"" : "") >1</option> 
    <option value="2" @(Request["hourfrom"] == "2" ? " selected=\"selected\"" : "") >2</option> 
    <option value="3" @(Request["hourfrom"] == "3" ? " selected=\"selected\"" : "") >3</option> 
    <option value="4" @(Request["hourfrom"] == "4" ? " selected=\"selected\"" : "") >4</option> 
    <option value="5" @(Request["hourfrom"] == "5" ? " selected=\"selected\"" : "") >5</option> 
    <option value="6" @(Request["hourfrom"] == "6" ? " selected=\"selected\"" : "") >6</option> 
    <option value="7" @(Request["hourfrom"] == "7" ? " selected=\"selected\"" : "") >7</option> 
    <option value="8" @(Request["hourfrom"] == "8" ? " selected=\"selected\"" : "") >8</option> 
    <option value="9" @(Request["hourfrom"] == "9" ? " selected=\"selected\"" : "") >9</option> 
    <option value="10" @(Request["hourfrom"] == "10" ? " selected=\"selected\"" : "") >10</option> 
    <option value="11" @(Request["hourfrom"] == "11" ? " selected=\"selected\"" : "") >11</option> 
    <option value="12" @(Request["hourfrom"] == "12" ? " selected=\"selected\"" : "") >12</option> 
    <option value="13" @(Request["hourfrom"] == "13" ? " selected=\"selected\"" : "") >13</option> 
    <option value="14" @(Request["hourfrom"] == "14" ? " selected=\"selected\"" : "") >14</option> 
    <option value="15" @(Request["hourfrom"] == "15" ? " selected=\"selected\"" : "") >15</option> 
    <option value="16" @(Request["hourfrom"] == "16" ? " selected=\"selected\"" : "") >16</option> 
    <option value="17" @(Request["hourfrom"] == "17" ? " selected=\"selected\"" : "") >17</option> 
    <option value="18" @(Request["hourfrom"] == "18" ? " selected=\"selected\"" : "") >18</option> 
    <option value="19" @(Request["hourfrom"] == "19" ? " selected=\"selected\"" : "") >19</option> 
    <option value="20" @(Request["hourfrom"] == "20" ? " selected=\"selected\"" : "") >20</option> 
    <option value="21" @(Request["hourfrom"] == "21" ? " selected=\"selected\"" : "") >21</option> 
    <option value="22" @(Request["hourfrom"] == "22" ? " selected=\"selected\"" : "") >22</option> 
    <option value="23" @(Request["hourfrom"] == "23" ? " selected=\"selected\"" : "") >23</option> 

    </select>

要：

<select name="hourto"> 
     <option value="0" @(Request["hourto"] == "0" ? " selected=\"selected\"" : "") >0</option> 
    <option value="1" @(Request["hourto"] == "1" ? " selected=\"selected\"" : "") >1</option> 
    <option value="2" @(Request["hourto"] == "2" ? " selected=\"selected\"" : "") >2</option> 
    <option value="3" @(Request["hourto"] == "3" ? " selected=\"selected\"" : "") >3</option> 
    <option value="4" @(Request["hourto"] == "4" ? " selected=\"selected\"" : "") >4</option> 
    <option value="5" @(Request["hourto"] == "5" ? " selected=\"selected\"" : "") >5</option> 
    <option value="6" @(Request["hourto"] == "6" ? " selected=\"selected\"" : "") >6</option> 
    <option value="7" @(Request["hourto"] == "7" ? " selected=\"selected\"" : "") >7</option> 
    <option value="8" @(Request["hourto"] == "8" ? " selected=\"selected\"" : "") >8</option> 
    <option value="9" @(Request["hourto"] == "9" ? " selected=\"selected\"" : "") >9</option> 
    <option value="10" @(Request["hourto"] == "10" ? " selected=\"selected\"" : "") >10</option> 
    <option value="11" @(Request["hourto"] == "11" ? " selected=\"selected\"" : "") >11</option> 
    <option value="12" @(Request["hourto"] == "12" ? " selected=\"selected\"" : "") >12</option> 
    <option value="13" @(Request["hourto"] == "13" ? " selected=\"selected\"" : "") >13</option> 
    <option value="14" @(Request["hourto"] == "14" ? " selected=\"selected\"" : "") >14</option> 
    <option value="15" @(Request["hourto"] == "15" ? " selected=\"selected\"" : "") >15</option> 
    <option value="16" @(Request["hourto"] == "16" ? " selected=\"selected\"" : "") >16</option> 
    <option value="17" @(Request["hourto"] == "17" ? " selected=\"selected\"" : "") >17</option> 
    <option value="18" @(Request["hourto"] == "18" ? " selected=\"selected\"" : "") >18</option> 
    <option value="19" @(Request["hourto"] == "19" ? " selected=\"selected\"" : "") >19</option> 
    <option value="20" @(Request["hourto"] == "20" ? " selected=\"selected\"" : "") >20</option> 
    <option value="21" @(Request["hourto"] == "21" ? " selected=\"selected\"" : "") >21</option> 
    <option value="22" @(Request["hourto"] == "22" ? " selected=\"selected\"" : "") >22</option> 
    <option value="23" @(Request["hourto"] == "23" ? " selected=\"selected\"" : "") >23</option> 
    </select>

來源

2013-04-12 rao

爲什麼不簡單地填充第二個列表_after_用戶從第一個列表中選擇了一個值？或在第一次選擇更改後重新填充列表？ –

你嘗試過什麼嗎？我在你的問題中看不到任何JavaScript代碼。 – Danny

您可以使用所選的選項

document.getElementById("to").onchange = function(){ 
if (document.getElementById("from").selectedIndex > document.getElementById("to").selectedIndex){ 
    alert("You cannot select less than from"); 
    document.getElementById("to").selectedIndex="0"; 
} 
}

See Live Demo的指數

來源

2013-04-12 12:41:11 Dineshkani

這裏有一個如何可以這樣做的example：

var hourFrom = document.getElementsByName("hourfrom")[0]; 
var hourTo = document.getElementsByName("hourto")[0]; 

hourFrom.onchange = function(){ 
    var from = parseInt(hourFrom.value, 10), 
     toOptions = hourTo.options, 
     toOptionsLength = toOptions.length; 

    while(toOptionsLength--){ 
     if(parseInt(toOptions[toOptionsLength].value, 10) < from){ 
      toOptions[toOptionsLength].disabled = true; 
     } 
     else{ 
      toOptions[toOptionsLength].disabled = false; 
     } 
    } 
};

我們基本上禁用hourFrom爲hourTo之前的所有選項。

來源

2013-04-12 12:32:19 Chase

我剛纔提供的例子只是更新按照您的要求.........

<script> 
    function check(hourto) 
    { 
     from=document.getElementById("hourfrom").value; 
     to=hourto.value; 
     if(to>from) 
     { 
      alert("From should be less then false"); 
      return false; 
     } 
     else 
     { 
      return true; 
     }  
    } 
</script> 
From: 
    <select name="hourfrom" id ="hourfrom"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
To: 
<select name="hourto" id ="hourto" onchange="check(this)"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select>

來源

2013-04-12 12:34:08

創建全局變量，而不是像應該的那樣停止事件流（記住：return false！== stopPropagation + preventDefault）... –

正如我在我的評論中所說：通過在from值更改時重新填充to元素來實現這一點非常簡單。 I've set up this quick fiddle就是這麼做的。

很明顯，你必須在現實生活中onload處理程序來包裝這個，但這個想法是一樣的......這裏有一個稍微不同的版本，小提琴的代碼：

document.getElementById('hoursfrom').onchange = (function() 
{ 
    //create closure reference to to element, so there is only 1 DOM query 
    var toElem = document.getElementById('hoursto'), 
    vals = (function(max) 
    {//this just returns an array [0,1,2,3,...,23] 
     var r = [], i = 0; 
     while(i <= max) 
     { 
      r.push(i++); 
     } 
     return r; 
    }(23));//change 23 to whatever max you need here, and the array will be adjusted 
    return function(e) 
    {//this is the actual handler, returned by IIFE 
     var newVals = vals.slice(parseInt(this.value, 10)),//slice from full vals array, only valid values will be used 
     //this allows for both from and to to have the same value, if you want to change that: 
     //var newVals = vals.slice(parseInt(this.value, 10) + 1); 
     options = '<option selected="selected">Now select a TO value</option>',//adds a default first option 
     i; 
     do 
     { 
      i = newVals.splice(0,1)[0]; 
      options += '<option value="'+i+'">'+i+'</option>'; 
     }while(newVals.length); 
     toElem.innerHTML = options; 
    }; 
}());

有了這個代碼，你可以擁有元素填充（或不），只要你想。您可能需要研究如何保留用戶在to元素中選擇的任何值（如果可能）。這並不難，只需在設置innerHTML之前使用toElem.value，並更改options字符串（options.replace('selected="selected"', '').replace('value="'.toElem.value.'"', 'value="'.toElem.value.'" selected="selected"')），例如...

來源

2013-04-12 12:55:29

javascript下拉列表驗證

回答

相關問題