新しく作成したcomboxのjQueryイベントを選択してください。

Question

カスタムjqueryイベントに関するアイデアを持っている人からガイダンスやアドバイスが必要です。 html selectから、私は "combobox"を作成しようとしました。このコンボボックスでは、ユーザーがテキストを入力することができ、オプションリストはその入力されたテキストによってフィルタされます。

<select name="foo_select" id="foo_id"> 
    <option value="foo_option_value_1">foo_option_text_1</option> 
    <option value="foo_option_value_2">foo_option_text_2</option> 
    <option value="foo_option_value_3">foo_option_text_3</option> 
</select> 

のような選択のためにそのように、htmlコードは、ユーザーが選択したときにそう

<div class="combo_container" id="foo_select_container" style="position:relative"> 
    <input type="text" class="combo_text" /> 
    <input type="hidden" name="foo_select" id="foo_id" /> 
    <div class="combo_arrow"> 
    <ul style="position:absolute;"> 
     <li id="foo_option_value_1">foo_option_text_1</li> 
     <li id="foo_option_value_2">foo_option_text_2</li> 
     <li id="foo_option_value_3">foo_option_text_3</li> 
    </ul> 
</div> 

に置き換えられるだろう」クラスを使用して、入力の新しい作成した「コンボボックス」から特定の「オプション」ですcombo_text "オプションのテキストが挿入され、隠し入力オプションのidが挿入されます。

私がする必要があるのは、ユーザー選択がいつオプションになるかを知ることだけです。基本的に私がする必要があるのは、jQuery（ '#foo_id'）.change（function（）{do_someting}）に相当するものを作成することです。私の新たに作成されたコンボボックスのために、私はどこから始めるかという理想はない。

誰かが理想を持っていれば、私は感謝します。

---

更新。

私は、私がhtml selectの振る舞いを維持できるように努力していると言います。コンボボックスは次のような機能を持っています：up/downフォーカスonフォーカスcombo.textユーザーは値を選択してその値を変更すると、機能を呼び出します。Select（）またはエスケープなしのchages - ユーザが上/下矢印を使用して他の値を選択した場合でも、矢印はとなります。

は、だから私は隠された入力$が（「#foo_id」）がいろいろ書いを行うを変更した場合..私のような何かをする必要があると思うので、私は、この入力の値が変更されたときに知る必要があります。

---

おかげ..

Answer 1

だから私は解決策を見つけるために管理していると私は誰かを助けるかもしれない投稿、それはこのように書きます：私は

jQuery('#foo_id').bind('cmbchange', function(){ 
    __do_something__ 
}) 

と機能でcmbchangeと呼ばれる新しいイベントを添付隠し入力で

選択（）私はそのイベントをトリガーしました

jQuery('#foo_id').trigger('cmbchange'); 

あなたはそれについて考えるならかなり簡単です。その素晴らしいことは、jQuery。 とにかく助けてくれてありがとう。

Answer 2

多分このようなものは、あなたが探しているものでしょうか？

// Should also work on elements that will 
// be created later 
$('#foo_select_container li') // Select all <li>s from the container 
    .on('click', function (ev) { // 
     // `this` will be bound to the clicked <li> element 
     var myId = $(this).attr('id'); 
     // More code here ... 
    }); 

Answer 3

操作を簡単にするため、すべての重要な要素にクラスがあることを確認してください。複数のインスタンスが必要な場合、IDは一意でなければならないため、IDの複雑さが増しますが、検証などのフォームロジックを管理する必要がある場合は、IDを入力と同じ名前にします。

擬似それは他のインスタンスからの絶縁を保つように、（私はそれがスクリプトを使って作成されていると仮定）combo_containerクラス内で「見つける」ために、すべてのコードを設定します

HTMLを選択し

<div class="combo_container" id="foo_select_container" style="position:relative"> 
    <input type="text" class="combo_text" /> 
    <input type="hidden" name="foo_select" id="foo_id" class="combo_id"/> 
    <div class="combo_arrow"> 
    <ul style="position:absolute;" class="combo_list""> 
     <li id="foo_option_value_1">foo_option_text_1</li> 
     <li id="foo_option_value_2">foo_option_text_2</li> 
     <li id="foo_option_value_3">foo_option_text_3</li> 
    </ul> 
</div> 

JS：

var $cont=$('.combo_container') 
$cont.find('.combo_list li').click(function(){ 
     $cont.find('.combo_id').val(this.id); 
     $cont.find('.combo_text').val($(this).text()); 
})