select2：使用AJAX進行多選的默認選擇

我正在使用真棒select2來創建多選組合。select2：使用AJAX進行多選的默認選擇

我想以編程方式選擇默認值（如在用戶之前所做的選擇），但我不知道如何。我讀過使用initSelection做的竅門，但是在創建組合時調用這個技巧，並且我不希望總是完成這個默認選擇。

2013-04-22 Gabriel Sanmartin

您是否找到答案？ – 2017-05-26 08:29:57

從文檔頁面：

「VAL - 獲取或設置選擇如果未指定值參數，則返回當前所選元素的id屬性如果值參數中指定它。將成爲目前的選擇。「

此外，從文檔：

$("#e8").select2("val", "CA");

來源

2013-04-22 08:59:49

這不起作用。由於數據是通過AJAX動態加載的，因此當您設置val屬性時，根本沒有元素加載到控件 – 2013-04-22 09:00:54

完成ajax調用並且已將數據設置到選擇框後，THEN從ajax調用成功處理程序中，你可以調用上面的答案中提到的代碼？那就是如果你正在使用你自己的Ajax調用。但是如果你使用組件提供的Ajax調用，我不知道 - 它不提供完成鉤子事件 - 所以你不妨寫自己的（10行也許？）。 – 2013-04-22 09:05:50

這是行不通的，因爲我的AJAX調用是基於用戶在輸入中鍵入的搜索詞（所以它不會加載整個元素集）。另外，我不希望我的選擇在任何時候都顯示出來;我希望能夠關閉它。 – 2013-04-22 09:19:23

我找到了一些解決方案，也許這將幫助你：

$('#el').select2({...}) // init select2 

var defaultData = [{id:1, text:'Item1'},{id:2,text:'Item2'},{id:3,text:'Item3'}]; 

$('#el').data().select2.updateSelection(defaultData);

來源

2013-05-22 14:22:12 sanj

上面的這段代碼對我來說可行，但在排除故障時遇到了一些問題。對於我的生活無法找到.updateSelection（）文件。在預加載數據時，我也會在輸入時出現奇怪的換行符。發現了一些對我更好的新代碼。 '$（'＃input'）。select2（'data'，preload_data）;'preload_data是對象 – 2014-01-22 08:56:36

-1

你可以找到一個解決方案在這裏與使用JQuery選擇二的自動完成，multiple selection Drop-down list 。

使用HTML「select」元素綁定數據，然後由「Select2」函數接管數據，將其轉換爲漂亮的多選下拉列表。

它可能使用AJAX表現良好，並且一定會在未來幾天嘗試。

來源

2013-07-14 06:00:01

下面的代碼工作正常，但select2需要刷新

$('#el').data().select2.updateSelection(defaultData);

來源

2014-01-13 11:56:59

如文檔here中列出，你可以簡單地添加「選項」你的選擇標記有預選的初始默認值。

<select class="js-data-example-ajax"> 
    <option value="3620194" selected="selected">select2/select2</option> 
</select>

來源

2016-01-25 18:07:50

不幸的是，這是行不通的！該項目顯示在沒有文字的框中！ – Triynko 2016-03-07 22:30:11

對我來說就像一個魅力工作（不使用ajax源） – Roland 2016-06-09 09:48:59

我有@Triynko同樣的行爲。我向選擇標記添加了一個選項，之後用ajax源初始化了select2，結果是選擇字段保持空白。有任何想法嗎？ – thinkh 2016-09-20 08:55:10

$('#el').select2().val(['val1','val2']).trigger("change")

的伎倆，但由於某種原因，刪除，添加自己的標籤要延長@sanj答案的能力...

來源

2016-08-09 17:46:59 sebap

。這似乎在我的項目中爲我工作。

通過HTML

HTML

<select class="select2" style='width:100%;' multiple> 
    <option val=''>Please choose</option> 
    <option val="1" selected>One</option> 
    <option val="2" selected>Two</option> 
    <option val="3">Three</option> 
</select>

$('.select2').select2();

結果

通過JavaScript

HTML

<select class="select2" style='width:100%;' multiple> 
    <option val=''>Please choose</option> 
    <option val="1">One</option> 
    <option val="2">Two</option> 
    <option val="3">Three</option> 
</select>

$('.select2').select2(); 
var defaultData = [{id:1, text:'One'},{id:2,text:'Two'}]; 
$('.select2').data().select2.updateSelection(defaultData);

結果

來源

2016-11-08 10:40:32 Louwki

通過例如在版本4 x

正確的解決方案：

$('#element').val(['val1','val2']).trigger('change');

查看：Creator description

來源

2016-12-18 07:49:29

終於想出來了!! Select2遍歷<select>下的<option>標記。

<select class="js-data-example-ajax" style="width:100%"> 
    <option value="3620194" selected="selected">Put the pre-selected options here</option> 
</select>

的<option>的內部HTML的文本項下投入回購對象。所以repo.text會給innerhtml。也就是說，我們所要做的就是將repo.text提供給init中的formatSelection選項。另外，從servlet（控制器）傳遞的json應該將所需的標籤文本置於text鍵之下！還在搞清楚如何向創建的li元素添加屬性，以便我可以保存更改的列表。任何想法？

來源

2017-03-30 10:26:18

我通過數值數組循環，然後設置匹配的每個選項（「選擇」，真）

values = [2, 5, 3] 

for val in values 
    $("#selects_id option[value="+val+"]").prop("selected",true).trigger("change")

你也可以做你從一個Ajax調用得到的結果。

來源

2017-12-12 18:12:19 longJOURNEY

select2：使用AJAX進行多選的默認選擇

回答

相關問題