0

テキストボックスと DropDownList があります。DropDownList は、テキスト ボックスの入力に基づいて入力されます。DropDownList が正しく設定されていないという問題がいくつかあります。

1 つは、テキスト ボックスに何かを入力すると、Tab で DropDownList に移動して正しく入力できることです。しかし、テキストボックスの内容を変更して何か他のものを入力し、DropDownList に再度タブで移動しようとすると、更新されません。

もう 1 つの問題は、テキスト ボックスへの入力を開始すると、ポップアップするオートコンプリート リストがあり、オプションをクリックしてテキスト ボックスに入力することができますが、これを行うと、DropDownList が入力されません。

これは、DropDownList を埋めるために必要な JavaScript です。

$('#textFrame').live('change', function (event) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetDirectors", "HostScan")',
        data: { frame: $(this).val() },
        success: function (data) {
            var markup = '';
            for (var x = 0; x < data.length; x++) {
                markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
            }
            $('#DirectorList').html(markup).show();
        }
    });

});

これを機能させるには何を変更する必要がありますか?

よろしくお願いします。

4

1 に答える 1

0

まず、.live は jQuery 1.7.0 で廃止されました。代わりに .on を使用してみてください。

2 番目に、Google cdn によってホストされている jQuery ファイルを使用します。サイトの帯域幅を削減するのに役立ちます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

コードに関しては、新しい値を追加する前にオプションをクリアしてみてください。これにより、以前のオプションに新しいオプションを追加していないことが保証されます。

$(function(){

    $('#textFrame').on('change', function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetDirectors", "HostScan")',
            data: { frame: $(this).val() },
            success: function (data) {
                if(data != null){
                var markup = '';
                $('#DirectorList').find('option').remove();
                    for (var x = 0; x < data.length; x++) {
                        markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
                    }
                $('#DirectorList').append(markup).show();
                }
            }
        });
    });
});
于 2012-09-04T22:49:03.590 に答える