0

入力テキストの値を使用して選択ボックスに入力しようとしています。これまでのところ、選択ボックスへの入力はうまくいっています。しかし、入力フィールドを別の値に変更すると問題が発生しました。選択ボックスは、配列の最後にオプション値を追加する代わりに、配列をリセットしません。これが私のコードです：

HTML:

<input type="text" name="ttc_list" id="ttc_list" />
<select name="priority_list" id="priority_list">
    <option value="">Choose TTC First...</option>
</select>

Javascript:

$(document).ready(function(){
    $("select#priority_list").attr("disabled","disabled");
    $('input[name="ttc_list"]').change(function() {
        var arr = [];
        arr.length = 0;
        var ttc = $("#ttc_list").val();

        if(ttc == 100 || ttc == 101)
        {
            var prty100_Start = 40;
            var prty100_End = 80;
                while(prty100_Start < prty100_End+1){
                  arr.push(zeroPad(prty100_Start++,2));
                }
        }
        else
        {
            var prty200_Start = 1;
            var prty200_End = 5;
                while(prty200_Start < prty200_End+1){
                  arr.push(zeroPad(prty200_Start++,2));
                }
        }

        var selectOptions = {
           100: arr,
           101: arr,
           200: arr,
           204: arr,
           210: arr
        }

        $("select#priority_list").removeAttr("disabled");
        console.log($(this).val());
        if(selectOptions[$(this).val()]) 
        {
            console.log(selectOptions[$(this).val()]);
               $.each(selectOptions[$(this).val()], function() { 
                   $('select[name="priority_list"]').append('<option>' + this + '</option>'); 
               });
        }
    });
});

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( num < 0 ) {
        zeroString = '-' + zeroString;
    }
    return zeroString+n;
}

例: ユーザーが入力テキストに '100' を入力すると、選択ボックスに '40' から '80' を入力する際に​​問題なく動作しますが、ユーザーがページを更新せずに入力テキストを '200' に変更すると、選択ボックスに次のオプションが表示されます。 '01' から '05' だけではなく、'40' から '80' および '01' から '05' です。

期待される結果: ユーザーがページを更新せずに入力テキストを '200' に変更すると、選択ボックスには '01' から '05' までのオプションのみが表示されます。

これが私の動作デモhttp://jsfiddle.net/danc32/6UqYS/1/です。

arr.length = 0アレイをリセットするには、どこに配置すればよいですか?

4

2 に答える 2

0

新しいアイテムを追加する前に、選択要素の内容をクリアする必要があります...またselectOptions、変更ハンドラー内でオブジェクトを再作成する必要はありません..静的オブジェクトであるため、以下に示すように一度だけ作成できます

$(document).ready(function () {
    var $priority_list = $("#priority_list").prop("disabled", true);

    var selectOptions = {};

    var arr_40_80 = arrays(40, 80);
    selectOptions['100'] = arr_40_80;
    selectOptions['101'] = arr_40_80;

    var arr_1_5 = arrays(1, 5);
    selectOptions['200'] = arr_1_5;
    selectOptions['204'] = arr_1_5;
    selectOptions['210'] = arr_1_5;

    $('input[name="ttc_list"]').change(function () {
        var ttc = $(this).val(), arr = selectOptions[ttc];

        $priority_list.prop("disabled", false).empty();
        if (arr) {
            $.each(arr, function () {
                $priority_list.append('<option>' + this + '</option>');
            });
        }
    });
});

function arrays(start,end){
    var arr = [];
    while (start <= end) {
        arr.push(zeroPad(start++, 2));
    }
    return arr;
}

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length);
    var zeroString = Math.pow(10, zeros).toString().substr(1);
    if (num < 0) {
        zeroString = '-' + zeroString;
    }
    return zeroString + n;
}

デモ:フィドル

于 2013-10-11T03:41:45.160 に答える
0

を使用しているため.append('<option>' + this + '</option>');、変更するたびに新しいオプションが既存のリストに追加されます。代わりに、次を使用できます。

.html('<option value="">Choose TTC First...</option>');    // remove old options

古いオプションをリセットしselectて削除するには、次を使用します。

.append('<option>' + this + '</option>');                  // add new options

新しいものを追加します。

完全なコードについては、このJSFiddleを参照してください。

于 2013-10-11T03:45:55.513 に答える