0

同じjQueryとJSON ASP.NET MVC3 メソッドを 2 つの異なる<select>要素にアタッチしようとしています。

<select id="StartYear">
<option value="">Select Year</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>

<select id="StartMonth">
<option value="">Select Month</option>
</select>

ID が"EndYear"および"EndMonth<select> " の要素にも同じことが当てはまります。

「開始年」と「終了年」の両方に同じjQuery関数をアタッチしたい：

$('[id$="Year"]').change(function () {
        var selectedYear = $(this).val();
        var selectedId = $(this).attr('id')
        if (selectedYear != null && selectedYear != '') {
            $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
                var monthsSelect = $('#StartMonth');
                if (selectedId == 'EndYear') {
                    monthsSelect = $('#EndMonth');
                }
                monthsSelect.empty();
                daysSelect.prepend("<option text='-- select month --' value='' selected='selected'></option>");
                $.each(months, function (index, month) {
                    monthsSelect.append($('<option/>', {
                        value: month.value,
                        text: month.text
                    }));
                });
            });
        }
    });

ただし、このコードは機能しません。Bugzilla でデバッグしたところ、この状態(selectedId == 'EndYear')で機能が壊れていることがわかりました。変数 selectedId はクロージャー スコープにありますが、関数スコープ内に移動する方法がわかりません。そうしないと、何が原因なのかわかりません。その条件がなくてもコードは機能していたことに注意してください (もちろん、#StartMonth だけで)

4

1 に答える 1

2

私があなたの問題を正しく理解していれば、変数selectedIdはの成功ハンドラー内でアクセスできますが$.getJSON、変数の値は別のchangeイベントによってすでに変更されている可能性があります。

たとえば、2つのchangeイベントがたとえば「#EndYear」と「#StartYear」から短い時間間隔で記述される場合、次のようになります。

  1. change「#EndYear」のイベントがトリガーされます
  2. selectedId変数は「EndYear」に設定されます
  3. 最初$.getJSONに開始されます
  4. change「#StartYear」のイベントがトリガーされます
  5. selectedId変数は「StartYear」に設定されます
  6. 2番目$.getJSONが開始されます
  7. 最初$.getJSONに終了し、変数の値はハンドラーselectedId内で「StartYear」になりますsuccess
  8. 秒$.getJSONが終了し、変数の値はハンドラーselectedId内で「StartYear」になりますsuccess

したがって、発生する前の値を使用するには、変数のさまざまなインスタンスが必要であると思います。別の方法で実装できます。のパラメータを置き換えて使用するのが私にとって最もネイティブなようです。コードは次のようになりますselectedId$.getJSON$.getJSON$.ajaxcontext$.ajax

$('[id$="Year"]').change(function () {
    var selectedYear = $(this).val();
    var selectedId = $(this).attr('id')
    if (selectedYear != null && selectedYear != '') {
        //$.getJSON('@Url.Action("Months")', {year: selectedYear}, function(months){
        $.ajax({
            url: '@Url.Action("Months")',
            dataType: 'json',
            data: { year: selectedYear },
            context: {selectedId: selectedId},
            success: function (months) {
                var selectedId = this.selectedId; // get from context
                ....
            }
        });
    }
});
于 2012-10-29T23:55:14.370 に答える