jQueryコンボボックスでドロップダウンアイテムが選択されるとイベントをトリガーします

ベン・ダビドウ

jQuery UIライブラリのオートコンプリートコンボボックスを使用して、ドロップダウンも受け入れるいくつかのテキストフィールド(基本的にはハイブリッドテキスト/ドロップダウン入力)を作成しています。ドロップダウン配列の項目だけでなく、フリーテキスト入力も受け入れるようにカスタマイズしました。

ユーザーがドロップダウンからアイテムを選択したら、入力に基づいてフォームの残りの部分にデータを入力する関数をトリガーしたいと思います。ユーザーが手動で値を入力したときにこの関数がトリガーされないようにします。ドロップダウンからアイテムを選択するユーザーにイベントを具体的にバインドする方法はわかりません。

これがフィドルです:http//jsfiddle.net/AhDHk/

HTML:

    <input type="text" name="realtor-name" id="lp-realtor-name" value="" class="text ui-widget-content ui-corner-all" />

JS:

// adds the dropdown, dropArray is the list of items for the dropdown, id is the ID of the html input. 

function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");


$("<button type='button'>&nbsp;</button>")                     
    .attr("tabIndex", -1)                     
    .attr("title", "Show All Items")                     
    .insertAfter($input)                     
    .button({                         
        icons: {                             
            primary: "ui-icon-triangle-1-s"                         
        },                         
        text: false                     
    })                     
    .removeClass("ui-corner-all")                     
    .addClass("ui-corner-right ui-button-icon lp-drop-button")   
    .click(function() {                         
        // close if already visible                         
        if ($input.autocomplete("widget").is(":visible")) { 
             $input.autocomplete( "close" );
             return;                         
        }                                              
        $(this).blur();                                                 
        $input.autocomplete("search", "" );                         
        $input.focus();                     
    });

$("form").submit(function(e) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    alert($(this).serialize());
});
}
フランシス

これを処理する方法は次のとおりです。

var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0,
    select: function(event, ui) { alert('test');}
}).addClass("ui-widget ui-widget-content ui-corner-left");

重複の可能性:jQuery UI Autocompleteselect

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ボタンクリック時にアイテムテンプレートのドロップダウンリストで選択した値をデータベースに保存するにはどうすればよいですか?

分類Dev

ボタンをクリックすると、すべてのグリッドドロップダウンリストアイテムが更新されます

分類Dev

ドロップダウンリンクをクリックすると、選択したテキストがボタンに表示されます

分類Dev

選択したアイテムのIDが表示されない2つのドロップダウンを選択します。コントローラーバインドにアクセスするにはどうすればよいですか。

分類Dev

別のドロップダウンリストで選択されている場合、ドロップダウン内のアイテムを削除します

分類Dev

ブートストラップボタンのドロップダウン子要素のクラスは、他のボタンのドロップダウンアイテムをクリックすると削除されます

分類Dev

ボタンのドロップダウンリストをクリックすると、アラートダイアログが表示されます

分類Dev

内部にコンボボックスがあるリストウィジェットアイテムをドラッグアンドドロップします

分類Dev

FileDownloaderとチェックボックス、選択したアイテムをダウンロードします

分類Dev

(ブートストラップ)-クリックされたアイテムを反映するようにドロップダウンボタンのテキストを変更すると、キャレットが削除されます

分類Dev

リッチ:ドロップダウンで選択リストで現在選択されているアイテムにジャンプします

分類Dev

Powershellの選択コンボボックスアイテムは、ボタンのクリックが機能しないことを使用してトリガーされます

分類Dev

リストボックスからアイテムを選択すると、事前レンダリングイベントが発生し、フォーカスが削除されます。

分類Dev

含まれているテキストが実行時に認識されない場合に、コード化されたUIでチェックリストボックスのアイテムコントロールを選択する

分類Dev

ドロップダウンボックスから名前を選択すると、メールがトリガーされます。Googleフォーム/スプレッドシート

分類Dev

ドロップダウンリストが選択されるまでボタン送信を無効にする

分類Dev

コンボボックスで選択したアイテムにテキストをバインドする

分類Dev

選択(ドロップダウン)をクリックすると、キーアップイベントが失われます

分類Dev

ボタンアイテムを使用してドロップダウンをブートストラップし、ボタンをクリックするとプログラムで閉じます

分類Dev

コンボボックスはフォームロードイベントで最初のアイテムを選択します。フォームロードで最初のアイテムを選択しないように変更するにはどうすればよいですか。

分類Dev

一部のコンボボックスアイテムをグレーアウトする方法。選択をブロックする必要があります。

分類Dev

ドロップダウンでJavafxを選択すると、異なるテキストボックスが表示されます

分類Dev

グループラベルの値が一致する場合は、ドロップダウンリストアイテムを選択しますか?

分類Dev

AJAXリクエストごとに入力されるコンボボックス内のアイテムを選択します

分類Dev

その行のチェックボックスがチェックされている場合、「OncheckedChange」イベントでグリッドビュー内にあるドロップダウンリストをバインドします

分類Dev

ウィンドウフォームのボタンでリストボックスから選択したアイテムを削除します

分類Dev

選択/ドロップダウンアイテムの値をコントローラーに渡すと、0のみが受信されます

分類Dev

ASP.NET MVCでのハードコードされたドロップダウンリストの選択に基づいて、データベースからアイテムのリストを表示します

分類Dev

データトリガーを使用して、コンボボックスで選択したアイテムの値をnullに設定します

Related 関連記事

  1. 1

    ボタンクリック時にアイテムテンプレートのドロップダウンリストで選択した値をデータベースに保存するにはどうすればよいですか?

  2. 2

    ボタンをクリックすると、すべてのグリッドドロップダウンリストアイテムが更新されます

  3. 3

    ドロップダウンリンクをクリックすると、選択したテキストがボタンに表示されます

  4. 4

    選択したアイテムのIDが表示されない2つのドロップダウンを選択します。コントローラーバインドにアクセスするにはどうすればよいですか。

  5. 5

    別のドロップダウンリストで選択されている場合、ドロップダウン内のアイテムを削除します

  6. 6

    ブートストラップボタンのドロップダウン子要素のクラスは、他のボタンのドロップダウンアイテムをクリックすると削除されます

  7. 7

    ボタンのドロップダウンリストをクリックすると、アラートダイアログが表示されます

  8. 8

    内部にコンボボックスがあるリストウィジェットアイテムをドラッグアンドドロップします

  9. 9

    FileDownloaderとチェックボックス、選択したアイテムをダウンロードします

  10. 10

    (ブートストラップ)-クリックされたアイテムを反映するようにドロップダウンボタンのテキストを変更すると、キャレットが削除されます

  11. 11

    リッチ:ドロップダウンで選択リストで現在選択されているアイテムにジャンプします

  12. 12

    Powershellの選択コンボボックスアイテムは、ボタンのクリックが機能しないことを使用してトリガーされます

  13. 13

    リストボックスからアイテムを選択すると、事前レンダリングイベントが発生し、フォーカスが削除されます。

  14. 14

    含まれているテキストが実行時に認識されない場合に、コード化されたUIでチェックリストボックスのアイテムコントロールを選択する

  15. 15

    ドロップダウンボックスから名前を選択すると、メールがトリガーされます。Googleフォーム/スプレッドシート

  16. 16

    ドロップダウンリストが選択されるまでボタン送信を無効にする

  17. 17

    コンボボックスで選択したアイテムにテキストをバインドする

  18. 18

    選択(ドロップダウン)をクリックすると、キーアップイベントが失われます

  19. 19

    ボタンアイテムを使用してドロップダウンをブートストラップし、ボタンをクリックするとプログラムで閉じます

  20. 20

    コンボボックスはフォームロードイベントで最初のアイテムを選択します。フォームロードで最初のアイテムを選択しないように変更するにはどうすればよいですか。

  21. 21

    一部のコンボボックスアイテムをグレーアウトする方法。選択をブロックする必要があります。

  22. 22

    ドロップダウンでJavafxを選択すると、異なるテキストボックスが表示されます

  23. 23

    グループラベルの値が一致する場合は、ドロップダウンリストアイテムを選択しますか?

  24. 24

    AJAXリクエストごとに入力されるコンボボックス内のアイテムを選択します

  25. 25

    その行のチェックボックスがチェックされている場合、「OncheckedChange」イベントでグリッドビュー内にあるドロップダウンリストをバインドします

  26. 26

    ウィンドウフォームのボタンでリストボックスから選択したアイテムを削除します

  27. 27

    選択/ドロップダウンアイテムの値をコントローラーに渡すと、0のみが受信されます

  28. 28

    ASP.NET MVCでのハードコードされたドロップダウンリストの選択に基づいて、データベースからアイテムのリストを表示します

  29. 29

    データトリガーを使用して、コンボボックスで選択したアイテムの値をnullに設定します

ホットタグ

アーカイブ