2015-05-04 68 views
24

tôi đưa ra sau đầu vào dữ liệu để Select2Lựa chọn một giá trị trong Select2 có optGroup

data = [{ 
    "id": "all", 
    "text": "All", 
    "children": [{ 
     "id": "item1", 
     "text": "item1" 
    }, { 
     "id": "item2", 
     "text": "item2" 
    }] 
}]; 

và tôi initialising Select2 như:

$(parent).select2({"data":data}); 

Bây giờ để chọn giá trị "item1 ", Tôi đã làm

$(parent).select2("val",["item1"]); 

Tuy nhiên thay vì giá trị" item1 "giá trị" tất cả "đang được chọn. Cách chọn giá trị item1?

+0

Tôi nghĩ rằng nó có cái gì để làm với thực tế là item1 là đối tượng trẻ em, và nó không biết –

+0

ooh ... nhưng làm thế nào để chọn đối tượng con? nhờ .. –

+0

Tôi tìm thấy [fiddle] này (http://jsfiddle.net/platypusman/xDUUg/) có thể giúp bạn, bạn dường như có cấu trúc đối tượng tương tự –

Trả lời

7

Để thiết lập giá trị được lựa chọn sử dụng select2 bạn nên sử dụng:

$(parent).val("item1").trigger("change"); 

Từ release notes:

Bạn trực tiếp nên gọi .val trên các yếu tố cơ bản để thay thế. Nếu bạn cần tham số thứ hai (triggerChange), bạn cũng nên gọi .trigger ("thay đổi") trên phần tử.

$("select").val("1"); // instead of $("select").select2("val", "1"); 
+0

Nhưng đây có phải là cách đúng đắn để làm điều đó không Tôi có nghĩa là sự khác biệt giữa $ (parent) .select2 ('item1') và $ (parent) .val ('item1'). –

+0

Phương pháp đầu tiên vẫn hoạt động nhưng sẽ bị loại bỏ trong bản phát hành tiếp theo. phương pháp thứ hai là như cho bình thường lựa chọn.Đường này nếu bạn thêm các plugin vào một mã hiện có js của bạn sẽ vẫn làm việc –

0

Tôi không chắc chắn nếu bạn có nghĩa là giá trị "Tất cả" được chọn khi khởi động hoặc nếu bạn muốn chọn "item1" bởi mã và nó không hoạt động. Tôi thấy lạ rằng "Tất cả" được chọn làm giá trị vì nó được coi là danh mục, thậm chí bằng cách thêm

$(".select2-text").select2("val",["item1"]); 

nó sẽ không chọn "Tất cả" cho tôi. Nếu tôi thêm

$(".select2-text").select2("val",["item2"]); 

Nó sẽ chọn "ITEM2" đối với tôi (có nghĩa là phương pháp để lựa chọn các công trình hạng mục, mặc dù nó không phải là cách tốt nhất, như đã nêu trong trả lời Lelio Faieta của)

nếu tôi thêm

$(".select2-text").select2("val",["all"]); 

nó sẽ không chọn "Tất cả" cho tôi, nó sẽ chỉ hiển thị cho tôi một lựa chọn trống. Vì vậy, tôi nghĩ rằng phải có vấn đề với mã của bạn vì trong một trang sạch sẽ không có cách nào để chọn "Tất cả"

Bạn có thể hiển thị cho chúng tôi toàn bộ mã, bao gồm cả html của trang của bạn (ít nhất là phần liên quan đến lựa chọn). Tôi đã cố gắng này (xem plunker đây: http://plnkr.co/edit/m6pFUt?p=preview)

<script> 
$(document).ready(function() { 
    data = [{ 
     "id": "all", 
     "text": "All", 
     "children": [{ 
      "id": "item1", 
      "text": "item1" 
     }, { 
      "id": "item2", 
      "text": "item2" 
     }] 
    }]; 

    $(".select2-text").select2({ 
     "data": data 
    }); 
}); 
</script> 
<select class="select2-text"></select> 

Và nó bắt đầu với item1 chọn, trong khi "Tất cả" được coi là một danh mục. Vì vậy, có lẽ nó chỉ là bởi vì một cái gì đó là sai trong mã của bạn/HTML.
Bạn đang sử dụng phiên bản Select2 nào? Tôi đang sử dụng 2-4.0.0

0

Tôi đã cố gắng tạo this demo để cho bạn biết rằng nó hoạt động. Bản trình diễn, sử dụng thẻ select làm công cụ chọn cho phần tử select trống và hiện có.Thật vậy, tôi không biết được những gì bạn có nghĩa là bởi parent:

<select> 
</select> 
<script> 
data = [{ 
    "id": "all", 
    "text": "All", 
    "children": [{ 
     "id": "item1", 
     "text": "item1" 
    }, { 
     "id": "item2", 
     "text": "item2" 
    }] 
}]; 

$('select').select2({ 
    "data": data 
}); 

$('select').select2("val", ["item2"]); 

</script> 
1

JSFiddle nơi item1 được chọn.

JS:

var data = [{ 
    id: 'all', 
    text: 'All', 
    children: [{ 
     id: 'item1', 
     text: 'item1' 
    }, { 
     id: 'item2', 
     text: 'item2' 
    }] 
}]; 

$('.js-example-data-array').select2({data:data}); 

$('.js-example-data-array').select2('val',['item1']); 

HTML:

<select class="js-example-data-array"> 
</select> 
Các vấn đề liên quan