die javascript-überprüfung auf den drop-down Listen

Ich habe zwei dropdown-Listen auswählen Wert von 0 bis 23. Was ich möchte ist, dass, wenn der Benutzer wählt einen Wert aus der ersten Liste, so kann er nicht wählen Sie einen Wert, der niedriger als dieser Wert in der zweiten Liste.

Wie sollte ich hinzufügen Validierung über javascript hier? !!

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

Zu:

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

Warum nicht einfach füllen die zweite Liste, nachdem der Benutzer einen Wert ausgewählt aus dem ersten? oder frischen Sie die Liste nach der ersten wählen hat sich geändert?
Haben Sie versucht, irgendetwas??? Ich sehe keinen javascript-code in Ihre Frage.

InformationsquelleAutor rao | 2013-04-12

html-select javascript

Können Sie einen Index der ausgewählten option

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

Siehe Eine Live-Demo

InformationsquelleAutor Dineshkani

Ich habe nur das Beispiel nur, aktualisieren Sie es wie pro Ihre Anforderung.........

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

erstellen von globalen Variablen, die nicht zu stoppen der event-flow als soll (Sie erinnern sich: return false !== stopPropagation + preventDefault)...

InformationsquelleAutor Ravindra Shekhawat

Als ich sagte in meinem Kommentar: es ist ziemlich einfach, dies zu erreichen, indem Sie sich vermehren-das to-element, wenn der Wert sich ändert. ich habe dieses schnelle fiddle , die genau das tut.

Offensichtlich, müssen Sie wickeln Sie diese in ein onload hf im echten Leben, aber die Idee bleibt die gleiche... Hier ist eine etwas andere version des fiddle-code:

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;
    };
}());

Mit diesem code können Sie das to-element bestückt (oder auch nicht)... wie Sie wollen. Vielleicht möchten Sie sich die Möglichkeiten zu bewahren, was Wert, den der Benutzer in dem ausgewählten element (wenn möglich). Es ist nicht schwer, benutzen Sie einfach toElem.value vor dem setzen der innerHTML, und ändern Sie die options string (options.replace('selected="selected"', '').replace('value="'.toElem.value.'"', 'value="'.toElem.value.'" selected="selected"')) zum Beispiel...

InformationsquelleAutor Elias Van Ootegem

Hier ist ein Beispiel, wie dies getan werden könnte:

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

Wir sind im Grunde deaktivieren Sie alle Optionen, bevor die hourFrom für hourTo.

InformationsquelleAutor Chase

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.