0

ユーザーがドロップダウン ボックスで項目を選択したときの特定のイベントはありますか? 複数のドロップダウン ボックスを使用するかなり大きなフォームを作成しています。ユーザーが最初のオプションを選択すると、2番目のボックスのオプションがAJAXを使用して変更され、無効になっている属性を削除したいため、ロード時に最初のものを除くすべてが無効になります。

$('#site_id').on('change', function(event) {
    $('#access_type_id').removeAttr('disabled');
});

私が抱えている問題は.change()、ドロップダウンのオプションが変更され、実際に必要になる前に次のドロップダウン ボックスが有効になったときに発生するように見えることです。ユーザーが前のドロップダウンで選択を行った場合にのみ、フォーム フィールドを「有効にする」変更の代わりに使用できる代替イベントはありますか?

アップデート

change イベントをまったく使用せず、 removeAttr を AJAX 呼び出しの成功セクションに配置することで、これを解決することができました。以下に例を示します。これにより、オプションの入力時に「次の」ドロップダウンを有効にすることができました。

$('#access_speed_id').on('select2-blur', function(event){
    $.ajax({
        async: true,
        data: $('#access_speed_id').serialize(),
        dataType: 'html',
        success: function(data, textStatus) {
            $('#cdr_id').removeAttr('disabled');
            $('#cdr_id').html(data);
        },
        type: 'post',
        url: '/services/specificCdrs'
    });
});
4

1 に答える 1

3

以下のコードを試してください:

<select id="drop1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="drop2"></select>

Jクエリ

$(document).ready(function(){
$("#drop2").attr("disabled", true);
$("#drop1").change(function(){
    $("#drop2").attr("disabled", false);
    //Put your ajax code here and bind like below code
    $("#drop2").append(new Option("option text", "value"));
    $("#drop2").append(new Option("xxx","1"));        
});
});

デモ: http://jsfiddle.net/J5kmz/

于 2013-07-31T09:40:11.340 に答える