-1

HTMLフォームのESNStartとESNENDが同じ範囲にあることをJqueryがチェックするようにするにはどうすればよいですか? ESNList は、テキスト フィールドに入力されたすべての複数の値が同じ範囲内にあるかどうかをチェックする方法をまだ理解していません。 ifステートメントで示されますか？これを示すフィドルは、私が多くのことを学ぶのに役立ちます。

<html>
    <head>
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $(":text").css("border", "2px solid red");
                $(":text").keyup(function() {
                    var enteredData = $(this).val()
                    console.log(enteredData);
                    if (enteredData == "") {
                        $(this).css("border", "2px solid red");
                    } else {
                        $(this).css("border", "inherit");
                    }
                    if ($(this).attr("id") == "ESNList") {
                        esnList = parseInt(enteredData);
                        switch (true) {
                            case (esnList >= 986329 && esnList <= 999999):
                                $("#ddl_StxName").val("stx2");
                                $("#ddl_rtumodel").val("globalstar");
                                break;
                            case (esnList >= 660000 && esnList <= 699999):
                                $("#ddl_StxName").val("mmt");
                                $("#ddl_rtumodel").val("globalstar");
                                break;
                            case (esnList >= 200000 && esnList <= 299999):
                                $("#ddl_StxName").val("stm3");
                                $("#ddl_rtumodel").val("stmcomtech");
                                break;
                            case (esnList >= 1202114 && esnList <= 1299999):
                                $("#ddl_StxName").val("smartone");
                                $("#ddl_rtumodel").val("globalstar");
                                break;
                        }

                    }
                });
            });
        </script>
    </head>

    <body>
        <form id="provision">ESNList:
            <input type="text" id="ESNList" name="ESNList" size="30" />
            <br />ESN Start:
            <input type="text" id="ESNStart" name="ESNStart" size="10" />
            <br />ESN End:
            <input type="text" id="ESNStart" name="ESNStart" size="10" />
            <br />UnitName:
            <input type="text" id="STxName" name="STxName" size="30" />
            <br />Unit Model:
            <select name="STxName" id="ddl_StxName">
                <option value="stx2">STX2</option>
                <option value="stm3" selected>STM3</option>
                <option value="acutec">Acutec</option>
                <option value="trackpack">Trackpack</option>
                <option value="mmt">MMT</option>
                <option value="smartone">Smartone</option>
                <option value="smartoneb">SmartOneB</option>
            </select>
            <br />RTU Model Type:
            <select name="rtumodel" id="ddl_rtumodel">
                <option value="globalstar">GlobalStar</option>
                <option value="both">Both</option>
                <option value="comtech">Comtech</option>
                <option value="stmcomtech">STMComtech</option>
            </select>
            <br />
            <input type="submit" value="submit" />
        </form>
    </body>
</html>
4

1 に答える 1

1

範囲外の数値のグループは作成していませんが、機能しているように見えるメソッドをいくつか作成しました。

無効なエントリをユーザーに示すのは難しいため、ユーザーがカンマ区切りのリストを入力できないようにすることを強くお勧めします。独自の入力に各番号を含めると、はるかにクリーンになります。「新しい番号を追加」のボタンを簡単に追加して、その新しい入力を作成できます。

配列を使用して、他のフィールドで変更される範囲と有効な範囲の値を格納しました。このモジュールは簡単ではなく、テストできるさまざまな数のテストサンドボックスを作成することをお勧めします。

$('#ESNList').keyup(function(){
    var enteredData = $(this).val();
    $(this).removeClass('valid');
    if( enteredData == ''){
        return;
    }
    if(hasMultipleValues(enteredData)){
        var range=rangeCheckMultipleNumbers(enteredData)
      if( range===false){
        log('Numbers not in same range');
        return;
      } else{
          setRangeValues(range);

        $(this).addClass('valid');
      }
    }
    var rangeIdx = getRangeIndex(enteredData);
    if(rangeIdx===false){
        log('Number not in range');
    }else{
        setRangeValues(rangeIdx);           
        $(this).addClass('valid');
    }
});

function hasMultipleValues( str){ 
     /* second test for a singel entry with comma at end*/   
    return str.indexOf(',') !=-1 && str.indexOf(',') != str.length-1;   
}

var ranges = [
    [986329, 999999],
    [660000, 699999],
    [200000, 299999],
    [1202114, 1299999]
];

var rangeText = [
    ["stx2", "globalstar"],
    ["mmt", "globalstar"],
    ["stm3", "stmcomtech"],
    ["smartone", "globalstar"]
]


/* returns range index if all in same range, otherwise returns false*/
function rangeCheckMultipleNumbers(str) {
    var nums = str.split(',');
    var rangeMatch = true; /* clean array to remove empty values if extra commas*/
    nums = $.grep(array, function(item, index) {
        return parseInt(item);
    });

    var groupRange = getRangeIndex(nums[0]);
    if(nums.length > 1) {
        for(i = 1; i < nums.length; i++) {
            if(!checkSameRange(nums[i - 1], nums[i])) {
                rangeMatch = false;
            }
        }
    }

    return rangeMatch ? groupRange : false;
}


function setRangeValues(rangeIndex) {
    $("#ddl_StxName").val(rangeText[rangeIndex][0]);
    $("#ddl_rtumodel").val(rangeText[rangeIndex][1]);
}

function checkSameRange(num1, num2) {
    return getRangeIndex(parseInt(num1, 10)) == getRangeIndex(parseInt(num2, 10));
}
/* returns false if out of range, otherwise returns range index*/
function getRangeIndex(num) {
    var idx = false;
    $.each(ranges, function(i, range) {
        if(num >= range[0] && num <= range[1]) {
            idx = i;
            return false;
        }
    });
    return idx;
}

デモ：http：//jsfiddle.net/hXsQ8/1/

于 2013-01-30T01:47:37.600 に答える