Question

我有两个下拉列表来选择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>

Answer 1

以下是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;
        }
    }
};

我们基本上在hourTrom for hourTo之前禁用所有选项。

Answer 2

我刚刚提供的示例只是根据您的要求更新它.........

    <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>

Answer 3

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

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

Answer 4

正如我在评论中所说：通过在from值更改时重新填充to-element，很容易实现这一点。 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-element元素。您可能希望研究保留用户在to元素中选择的任何值的方法（如果可能）。这并不难，只需在设置innerHTML之前使用toElem.value，然后更改options字符串（options.replace('selected="selected"', '').replace('value="'.toElem.value.'"', 'value="'.toElem.value.'" selected="selected"')），例如......

下拉列表中的javascript验证

4 个答案: