34

jqueryUIコンボボックスにonchange関数をアタッチするにはどうすればよいですか？これが私のコードです：

$(".cmbBox").combobox({
     change:function(){
         alert($(this).val());
     }
});

値が変更されると、更新された値を警告します。

助けてください..:)

4

8 に答える 8

51

コンボボックスのサンプルソースは、この例の中にあります。change次のようにソースコードを変更して、基になるselectのイベントをトリガーします（selectプラグイン内のオートコンプリート初期化内のイベントハンドラーを変更します）。

/* Snip */
select: function( event, ui ) {
    ui.item.option.selected = true;
    self._trigger( "selected", event, {
        item: ui.item.option
    });
    select.trigger("change");                            
},
/* Snip */

次に、 ：の通常のchangeイベントのイベントハンドラーを定義します。select

$(".cmbBox").change(function() {
    alert(this.value);
});

残念ながら、これは通常のイベントとまったく同じようには機能しませんselect.change。コンボボックスから同じアイテムを選択してもトリガーされます。

ここで試してみてください：http：//jsfiddle.net/andrewwhitaker/hAM9H/

于 2011-01-21T17:25:42.507 に答える
24

IMHO、ユーザーがコンボボックスを変更したことを検出するさらに簡単な方法（jQuery UIオートコンプリートコンボボックスのソースコードを微調整する必要はありません）は次のとおりです。これは私のために働きます。確かにリファクタリングする方法はありますが、それらがたくさんある場合は繰り返しです。ここや他の場所で、このウィジェットを詳細に研究して説明してくれたすべての人に感謝します。

$("#theComboBox").combobox({ 
        select: function (event, ui) { 
            alert("the select event has fired!"); 
        } 
    }
);
于 2013-08-25T11:39:55.837 に答える
1

ui.comboboxプラグインに：

selectメソッドの最後に追加しました：

$(input).trigger("change", ui);

「varinput...」の前に追加しました：

select.attr('inputId', select.attr('id') + '_input');

その後、機能的なonchangeイベントを発生させるために... ui.comboboxで、changeメソッドにコメントを付け、そのコードをui.autocompleteを拡張するcheckvalメソッドに移動しました。

$.extend( $.ui.autocomplete, {
    checkVal: function (select) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                        valid = false;
            $(select).children("option").each(function () {
                if ($(this).text().match(matcher)) {
                    this.selected = valid = true;
                    return false;
                }
            });
            if (!valid) {
                // remove invalid value, as it didn't match anything
                $(this).val("");
                $(select).val("");
                $(this).data("autocomplete").term = "";
                $(this).data("autocomplete").close();
            }
        }
});

そして、入力変更メソッドを次のようにコーディングしました。

var oCbo = ('#MyCbo').combobox();
$('#' + oCbo.attr('inputId')).change(function () {

    // from select event : check if value exists
    if (arguments.length < 2) {
        $.ui.autocomplete.checkVal.apply(this, [oCbo]);
    }

        // YOUR CODE HERE
});
于 2012-04-16T11:56:07.397 に答える
0

ドキュメントの「イベント」セクションに、次のような変更を処理すると記載されています...

$( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});
于 2011-01-21T15:47:26.920 に答える
0

これは私にとってはうまくいくようです

if('function' == typeof(callback = ui.item.option.parentElement.onchange))
                        callback.apply(this, []);

直前

self._trigger("selected", event, {
于 2012-01-27T00:11:58.713 に答える
0

コンボボックスをウィジェットとしてデプロイする場合の最も簡単な方法（IMHO）：

  1. ウィジェットで「_create」メソッドを検索します

  2. その中から「オートコンプリート」（入力が管理される場所）を探します

  3. データを取得するための「select」メソッドを追加（使用）します：ui.item.value

（関数（$）{
$ .widget（ "ui.combobox"、{
    //デフォルトオプション
    オプション：{
    //オプション...。
    }、
    _create：function（）{

    //いくつかのコード...。

    //これはあなたが探している入力です
    input = $（ ""）
    .appendTo（ラッパー）
    .val（value）
    .addClass（ "ui-state-default"）

    //これはあなたが探しているオートコンプリートです
    .autocomplete（{
        遅延：0、
        minLength：0、
        ソース：function（リクエスト、レスポンス）{
        //いくつかのコード..。
        }、

        //これはあなたが探しているselectメソッドです...
        選択：function（event、ui）{

        //これは選択した値です
        console.log（ui.item.value）;
        }、
        変更：function（event、ui）{

        //いくつかのコード..。
        }
    }）
    //残りのコード
    }、

    破棄：function（）{
    this.wrapper.remove（）;
    this.element.show（）;
    $ .Widget.prototype.destroy.call（this）;
    }
}）;
于 2013-04-26T08:57:01.473 に答える
0

実際、onchangeイベントにはすでに「フック」があります。

必要なメソッド呼び出しまたはコールバックの次の行を変更するだけです。

autocompletechange: "_removeIfInvalid"
于 2014-01-08T17:01:21.330 に答える
0 
$("#theComboBox").combobox({ 
    select: function (event, ui) { 
        alert("the select event has fired!"); 
    } 
}

）;

于 2014-01-21T05:51:30.507 に答える