動的に選択された選択要素をロードする

Question

選択したjQueryプラグインを使用しています（ハーベスト別）。それは（文書）.readyでうまく動作していますが、クリックすると、ajaxを使用して、選択したオブジェクトを動的に作成して、選択したオブジェクトを使用したいというボタンがあります。しかし、元のselect要素だけが「選択された」機能を持ち、新しい（動的に作成された）機能は機能しません。私は、新しい要素を追加するためにjQuery.getを使用しています。ここでは、コードのサンプルです：

jQuery(".select").chosen();//this one loads correctly 
jQuery("#add-stage").click(function() { 
    jQuery.get('/myurl',{},function(response) { 
      //response contains html with 2 more select elements with 'select' class 
      jQuery('#stages').append(response); 
     jQuery(".select").chosen();//this one doesn't seem to do anything :-(
    }); 
}); 

私はどこか.live（）関数を必要とすることを考えていたが、私はまだそれを把握することができていません。どんな助けでも大歓迎です！

注 - ドキュメントに指定されている、私はresponse要素がselectクラスを持っていることを確認してくださいtrigger("liszt:updated");

Answer 1

を使用して、動的に新しいオプションをロードしようとしているわけではありません。

console.log(response); // to verify 

新しい要素にのみプラグインを適用することをお勧めします。

jQuery(".select").chosen(); 

jQuery("#add-stage").click(function() { 
    jQuery.get('/myurl',{},function(response) { 
     console.log(response); // verify the response 

     var $response = $(response); // create the elements 

     $response.filter('.select').chosen(); // apply to top level elems 
     $response.find('.select').chosen(); // apply to nested elems 
     $response.appendTo('#stages'); 
    }); 
}); 

/myurlは、HTML文書全体を返している場合も、あなたは、予期しない結果を得ることができます。

Answer 2

私はChosenと同様の問題がありました。ユーザーがリンクをクリックした後、新しい選択を動的に追加しようとしていました。以前の選択をクローンしてからクローンを追加しましたが、選択されたオプションは機能しませんでした。解決策は、選択したクラスを削除することでしたし、要素を追加して、DOMにクローンを入れてから、再度選択し実行します。

selectObjがある

$.ajax({ 
    url: url, 
    type: 'GET', 
    dataType: 'json', 
    cache: false, 
    data: search 
}).done(function(data){ 
    $.each(data, function(){ 
    $('<option />', {value: this.value, text: this.text}).appendTo(selectObj); 
    }); 
    chosenObj.trigger('liszt:updated'); 
}); 

：あなたはAJAXで選択使用することができます

clonedSelect.find('select').removeClass('chzndone').css({'display':'block'}).removeAttr('id').next('div').remove(); 
mySelect.after(clonedSelect); 
clonedSelect.find('select').chosen(); 

Answer 3

片道特定の選択オブジェクト

しかし...

選択が非常に悪いです。 いくつかのオプションを選択してから新しいものを検索してから、選択したものを削除し、入力を続けるなど、いくつかの視覚的なバグがあります。 JQueryチェーンをサポートしていません。 AJAXを実装しようとすると、選択した項目のフォーカスが外れると、入力したテキストが消え、もう一度クリックするといくつかの値が表示されます。 これらの値を削除しようとすることはできますが、一部の値を選択するときにも発生するため、 'blur'イベントを使用できないため、苦労します。 特にAJAXでは、全く選択しないことをお勧めします。

Answer 4

1.- Livequery pluginをダウンロードし、ページから呼び出します。

2.-リリースクラーケン：あなたのコードの後$(".select").livequery(function() { $(this).chosen({}); });

Answer 5

（選択を記入）これは、選択されたが動的に新しいオプションをロードする例である。この

$(".select").trigger("chosen:updated"); 

Answer 6

を.WRITEは毎回データベース使用してAJAXを形成します選択されました。

$('.my_chonsen_active').chosen({ 
    search_contains:true 
}); 
$('.my_chonsen_active').on('chosen:showing_dropdown', function(evt, params){ 
    id_tosend=$(this).attr("id").toString(); 
    $.get("ajax/correspondance/file.php",function(data){ 
    $('#'+id_tosend).empty(); 
    $('#'+id_tosend).append(data); 
    $('#'+id_tosend).trigger("chosen:updated"); 
    }); 
});