4

選択を新しいアイテムに変更する直前に、どのアイテムが選択されたかを知りたい単一アイテムの HTML 選択ボックスがあります。

change イベントが発生する頃には、すでに手遅れです。

$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
      // this will get me the current selected item (the new one)
      str += $(this).text() + " "; });          
})

ドキュメントには、「コントロールが入力フォーカスを失い、フォーカスを取得してからその値が変更されたときに変更イベントが発生する」と書かれています。

ただし、「ぼかし」イベントをトラップすることも正しいイベントではないようで、「onFocusLost」タイプのイベントはありません..

これは、多くのフープジャンプなしで、クロスブラウザー互換の方法で実行可能ですか?

4

4 に答える 4

5

これにより、値が変更される前に値が取得されます。ユーザーが選択メニューを開くとすぐに、実際に何かを選択する前に、値が取得されます。

        $(document).ready(function(){
            $('select').focus(function(){
                var theValue = $(this).attr('value');
            });
    });
于 2009-12-04T20:44:31.257 に答える
1

ちょっと考えただけですが、一度変更イベントを処理したら、変数に値を設定して、次に処理するときにその値を取得することはできませんか?

于 2009-12-04T20:33:56.033 に答える
1

あなたはこのようなことをすることができます

$(document).ready(function() {
    $("select").each(function(){
        var str = getSelectedText(this);
        $(this).data('selected',str);
    }).change(function () {
        var str = getSelectedText(this);
        var selectedbefore = $(this).data('selected');
        $(this).data('selected',str);
    });
});
function getSelectedText(obj){
    var str = "";
    $(obj).closest('select').find("option:selected").each(function () {
        str += $(this).text() + " ";
    });
    return str;
}
于 2009-12-04T20:41:19.293 に答える
0

.on を使用した最新のソリューションを次に示します。

$('#form-id').on('focus','select',function(){
 var previous = $(this).children('option').filter(':selected').val();
});

しかし、私が達成したいことのために、上記はあまりにも緩すぎました。ユーザーがフォームデータを送信する前に複数回変更した後、上記が間違った値を与えるため、最初のページ出力で選択された値が必要でした。

私の解決策は、出力の値が取り込まれた選択要素に「前の」属性を追加し、保存時にAjaxからの「成功」の結果でそれを変更することでした:

<select name="status" id="status" previous="D"> ... </select>

次に、ユーザーが確認ポップアップでキャンセル ボタンを押すか、Ajax エラーが発生すると、次のようにしました。

$('#status').val($('#status').attr('previous')).attr('selected',true);

Ajax が「成功」した場合、「previous」属性を新しい正常に保存された値に変更します。

$('#status').attr('previous',$('#status').children('option').filter(':selected').val());

単一の for form 要素に適していますが、設定を保存するための Ajax 呼び出しを解読する jQuery UI ダイアログ ボックスをトリガーするアカウント ステータス設定選択メニューをそれぞれ持つアカウントのリストがある適応が必要でした。単一の非表示フォーム一連のフィールドには、.on('change')を使用して選択メニューから値が入力されます

選択メニューの 1 つを次に示します (通常は一意の ID が使用されますが、私の場合、サーバー側の理由で今回はそれらを使用できないため、属性 "rel" と "type" を組み合わせて使用​​します。同じコードで別のデータベース テーブルに変更を保存します):

<select name="status" rel="23" type="company" previous="P">
    <option value="P" selected="selected">Pending</option>
    <option value="D">Deactivated</option>
    <option value="A">Activated</option>
</select>

スクリプトには、失敗が発生する可能性のある 3 つのポイントと、1 つの成功が発生する可能性があるため、関数を作成することは理にかなっています。

function set_select(saved)
    {
        var e = $(':input[type="'+$('#status-type').val()+'"][rel="'+$('#status-id').val()+'"]');
        if(saved) e.attr('previous',e.children('option').filter(':selected').val());
        e.val( e.attr('previous') ).attr('selected',true);  
    };

jQuery UI ダイアログ コードは次のとおりです。

    $('#update-confirm').dialog({
        autoOpen:false,
        resizable:false,
        height:230,
        modal:true,
        buttons:{
            "Change": function(){
                var exec = false;
                $dialog = $(this);
                switch($('#status-type').val())
                {
                    default: set_select(false); break;
                    case 'company': exec = 'save-company-status'; break;
                    case 'user': exec = 'save-user-status'; break;
                };
                if(exec)
                {
                    $.ajax({
                        type: 'POST',
                        url: '/sys.manager/apps.manager.php?do='+exec,
                        data: $('#form-status').serialize(),
                        success: function(response)
                        {
                            if(!response.result || response.result == 'false')
                            { 
                                console.log('Fail');
                                set_select(false);
                            } else {
                                console.log(response.result);
                                console.log(response.mail);
                                $dialog.dialog('close');
                                set_select(true);
                            }

                        },
                        error: function(response) {
                            set_select(false);
                        }
                    });
                };
            },
            Cancel: function() {
                set_select(false);
                $(this).dialog('close');
            }
        }
    });
于 2013-06-11T13:56:24.880 に答える