web-dev-qa-db-ja.com

jQueryでDropDownListアイテムが選択されるたびにイベントを起動する

ドロップダウンがあります：<asp:DropDownList id="dropdownid" runat="server" class=blah"/>

私のjQueryでは、次のように変更イベントを割り当てます。

$('#dropdownid').change(function() {......});

現在、これはドロップダウンから異なる値を選択したときに機能しますが、同じ値を再度選択したいとしましょう。 （同じ値で別の呼び出しを行うため）、ドロップダウンから選択した値をクリックして「選択」するだけで（値を変更せずに）再度選択すると、イベントは発生しません。 jqueryに割り当てる必要がある別のイベントはありますか？回避策は何ですか？

jqueryhtml-select
34
ra170

Vincent Ramdhanie'sの提案を展開するには、このようなことをしてください。基本的には、他の場所で再利用できる独自のjQuery関数になります。

ステップ1：jQuery関数を作成する

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var clicknum = 0;
            $(this).click(function() {
                clicknum++;
                if (clicknum == 2) {
                    clicknum = 0;
                    fn(this);
                }
            });
        });
    }
})(jQuery);

ステップ2：新しく作成されたjQuery関数のファイルが使用のために参照されていることを確認します。

<script src="Scripts/jqDropDown.js" type="text/javascript"></script>

ステップ3：新しい機能を利用する：

$('#MyDropDown').selected(function() {
    //Do Whatever...
});

オリジナル情報
現在のコードベースでは、asp：DropDownListから同じ値を選択してもchangeイベントは発生しません。

.blurイベントに別のjQuery関数を追加してみてください。これは、コントロールがフォーカスを失うと起動します。

$('#dropdownid').blur(function() {......});

ぼかし機能が機能しない場合は、更新ボタンまたは何かを追加して、使用しようとしている機能を起動します。

28
RSolberg

これを試して：

$(document).ready(function(){
 var clicknum = 0;
 $("#dropdownid").click(function(){
    clicknum++;
    if(clicknum == 2){
        alert($(this).val());
        clicknum = 0;
    }
 });
});

まず、ユーザーがドロップダウンボックスをクリックするたびにイベントを発生させたくないので、クリック数を追跡するために変数clicknumを作成します。 2回目のクリックは、ユーザーが行う選択です。

Click numが2である場合、これは2回目のクリックであるため、イベントを発生させ、次回にclicknumを0にリセットします。それ以外の場合は何もしません。

16
Vincent Ramdhanie

クリックイベントハンドラーを、selectではなく、囲まれたオプションコントロールに接続します。

$('#dropdownid option').click(function() {......});

これは、変更するかどうかに関係なく、ドロップダウンからオプションを選択したときにのみ起動します。

7
Adam Lassek

[〜＃〜] api [〜＃〜] によると：

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

別の方法として、マウスダウンを試すか、イベントをクリックすることもできます。

3
ern

このソリューションをご覧ください。
http://ledomoon.blogspot.com/2009/12/dropdown-selected-change-event-by.html

$(document).ready(function () {
    // select all the divs and make it invisible
    $("div.Content").css("display", "none");
    // Find all the combos inside the table or gridview
    $("#tblItems").find("select.Status").each(function () {
        // Attached function to the change event of each combo
        $(this).change(function () {
            if ($(this).val() == "test1") {
                // Change the visibility of the next div after the selected combo if the selected value = test1
                $(this).parent().find("div.Content").fadeIn("slow"); //css("display","block");
            } else {
                $(this).parent().find("div.Content").fadeOut("slow"); //.css("display","none");
            }
        });
    });
});

お役に立てれば

2
user186816

私にとって、次の解決策はうまくいきました：

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});
0
ScholChr

ドロップダウンの選択された項目は、すでに行われた選択を反映するためにあります。

私の提案は、必要なアクションが完了するたびに、ドロップダウンを「選択...」などのデフォルト値にリセットすることです。そのため、ユーザーがアクションAを2回実行する必要がある場合、ドロップダウンは各アクションの後にリセットされます。

  1. ユーザーはドロップダウンからアクションAを選択します。
  2. アクションAが実行され、ドロップダウンがリセットされます。
  3. ユーザーはドロップダウンからアクションAを選択します。
  4. アクションAが実行され、ドロップダウンがリセットされます。

お役に立てれば、

リッチ

0
kim3er

発生しているこの問題は、クライアントがベース選択HTMLを処理しているためです。ほとんどのクライアントは非変更にフラグを立てないため、別のことを試してみる必要があります。

おそらく「更新」ボタンなどを追加しますが、私はデザイナーではなく開発者なので、おそらく間違っています。 :)

0
Craig