0

我有两个下拉列表来选择从 0 到 23 的值。我想要的是，当用户从第一个列表中选择一个值时，他不能在第二个列表中选择低于该值的值。

我应该如何在这里通过 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>
4

4 回答 4

0

这是一个如何做到这一点的示例：

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 之前的所有选项。

于 2013-04-12T12:32:19.353 回答
0

我刚刚提供了示例，只需根据您的要求对其进行更新............

    <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-12T12:34:08.870 回答
0

您可以使用所选选项的索引

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";
}
}

观看现场演示

于 2013-04-12T12:41:11.823 回答
0

正如我在评论中所说：通过在 from 值更改时重新填充 to 元素来实现这一点非常容易。我已经设置了这个快速小提琴来做到这一点。

显然，您必须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 元素中选择的任何值的方法（如果可能）。这并不难，只需toElem.value在设置innerHTML之前使用，并更改options字符串（options.replace('selected="selected"', '').replace('value="'.toElem.value.'"', 'value="'.toElem.value.'" selected="selected"')）例如......

于 2013-04-12T12:55:29.353 回答