加載動態「選擇」選擇元素

我使用選擇的jQuery插件（通過收穫）。它在（document）.ready中工作正常，但是我有一個按鈕，單擊它時，會使用ajax動態創建更多選擇對象，以便使用「選擇」功能。但是，只有原始選擇元素具有「選擇」功能，而新（動態創建）功能不起作用。我使用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（）函數的地方，但我一直沒能明白這一點呢。任何幫助深表感謝！

注 - 我不是要動態加載新的選擇，如使用trigger("liszt:updated");

來源

2011-12-01 Brian Anderson

確保response元素具有select類的文檔中指定。

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文檔，你可能會得到不可預知的結果。

來源

2011-12-01 23:42:43 RightSaidFred

謝謝，我在響應中發現了問題！選擇的項目在那裏，但他們有重複的ID，所以他們不會正確加載。過濾器之前的 –

添加： $（「。select」）。empty（）; 追加後添加： $（「。select」）。trigger（「chosen：updated」）; –

我和Chosen有類似的問題。我試圖在用戶點擊鏈接後動態添加新的選擇。我克隆了之前的選擇，然後添加了克隆，但選擇的選項不起作用。解決的辦法是剝離已選擇類和添加的元素，把克隆的DOM，然後再跑選擇：你可以使用Ajax使用選擇

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

來源

2012-06-11 12:52:56 Judson

一個辦法：

$.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'); 
});

其中selectObj是特定選擇對象

但是...

選擇實施非常糟糕。它有幾個可視錯誤，如：選擇一些選項，然後開始搜索新的，然後刪除選定的，並繼續輸入 - 你會得到'選擇一些選項'擴展像'選擇一些選項搜索值'。它不支持JQuery鏈接。如果您嘗試實現AJAX，您會注意到，當您鬆開選定的焦點時，輸入的文本消失，現在當您再次單擊時，它將顯示一些值。您可以嘗試刪除這些值，但這將很困難，因爲您無法使用「模糊」事件，因爲它在選擇某些值時也會觸發。我建議不要使用選擇，尤其是使用AJAX。

來源

2013-01-29 14:38:49 TomTom

1.-下載Livequery plugin並從您的頁面調用它。

2：釋放海妖：$(".select").livequery(function() { $(this).chosen({}); });

來源

2013-07-17 14:25:51

你的代碼後（填選）.WRITE這個

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

來源

2014-04-07 16:16:35

此選擇的動態加載用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"); 
    }); 
});

來源

2016-09-11 07:35:57 Fawad

加載動態「選擇」選擇元素

回答

相關問題