select2: điều khiển theo chương trình trình giữ chỗ

Question

Tôi muốn thay đổi trình giữ chỗ trên điều khiển tăng cường select2 khi có sự kiện.

Vì vậy, tôi đã có này ...

<select id="myFoo" placeholder="Fight some foo..."> 

... sau đó được cải tiến thêm:

init: function(){ 
    $('#myFoo').select2(); 
}, 

... vì vậy bây giờ nó có giữ chỗ đúng của nó.

Nhưng sau đó tôi muốn nó phản ứng với một sự kiện và xóa placeholder ...

someButtonPress: function(){ 
// $('#myFoo').placeholder(""); 
// $('#myFoo').attr('placeholder', ""); 
// $('#myFoo').select2('placeholder',""); 
// $('#myFoo').select2({placeholder:""}); 
// none of these work 
} 

này dường như rất cơ bản, nhưng tôi stumped.

Tôi không thể tìm thấy bất kỳ nội dung gì trong tài liệu. Tôi đang tìm kiếm địa điểm sai?

Answer 1

Một cách khác để cập nhật trình giữ chỗ là để thiết lập "giữ chỗ" thuộc tính trên yếu tố lựa chọn và gọi Select2() một lần nữa:

$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2(); 

Chỉ cần nhớ rằng nếu bạn thông qua bất kỳ tùy chọn để Select2 lần đầu tiên , bạn sẽ cần phải chuyển chúng lại (hoặc chỉ thiết lập các tùy chọn mặc định bằng cách sử dụng $ .fn.select2.defaults).

Answer 2

Cập nhật

Nếu bạn đã thiết giữ chỗ qua HTML data-placeholder thuộc tính, bạn cần phải thay đổi nó và không phải là lựa chọn nội bộ, vì vậy nó sẽ trông như Fabian H. gợi ý:

$select.attr("data-placeholder", "New placeholder text"); 
$select.data("select2").setPlaceholder(); 

Hoặc nếu không, sử dụng tùy chọn nội bộ select2.opts.placeholder:

var select2 = $select.data("select2"); 
select2.opts.placeholder = "New placeholder text"; 
select2.setPlaceholder(); 

Đây không phải là hoàn hảo tất nhiên, nhưng cách tốt hơn so với hack2 tạo HTML.

1. this.$select.data("select2") giúp bạn đối tượng Select2 nội bộ, vì vậy bạn sẽ có được quyền truy cập vào các thuộc tính và phương thức của nó (không chỉ cho những xuất khẩu để sử dụng từ bên ngoài)
2. Tiếp theo, tôi đang cập nhật các tùy chọn nội placeholder hoặc thay đổi liên quan thuộc tính dữ liệu
3. Cuối cùng tôi kích hoạt phương thức nội bộ setPlaceholder đặt bộ đệm địa điểm mới.

Hy vọng điều đó sẽ hữu ích!

Answer 3

Để cập nhật các placeholder của một Select2 với dữ liệu từ xa (AJAX/JSONP) sử dụng mã này:

$input = $("input#e7"); 
$input.attr("data-placeholder", "New placeholder"); 
var select2 = $input.data("select2"); 
select2.setPlaceholder(); 

Tín dụng cho Brocks response.

Answer 4

nếu bạn muốn tự động thay đổi giữ chỗ, không đặt nó trên HTML

<select id="myFoo"> 

bộ nó trên jQuery

$('#myFoo').select2({ 
    placeholder: "your placeholder" 
}); 

sau đó cập nhật nó như thế này

someButtonPress: function(){ 
$('#myFoo').select2({ 
    placeholder: "change your placeholder" 
    }); 
} 

nó làm việc cho tôi, hy vọng nó sẽ giúp.

Answer 5

Tôi tin rằng hành vi sẽ phụ thuộc vào phiên bản Select2 bạn đang sử dụng - chúng tôi đang sử dụng v3.5.1 - nhưng tôi phải thực hiện một cách tiếp cận hơi khác để có được trình giữ chỗ thay đổi theo yêu cầu. Trong trường hợp của tôi, bộ chọn thay đổi các tùy chọn được trình bày dựa trên giá trị của một bộ chọn khác, có nghĩa là trình giữ chỗ cần thay đổi với tập dữ liệu mới.

Để làm điều này hoạt động, tôi phải xóa mọi tham chiếu đến trình giữ chỗ trong phần tử nhập HTML.

<input type="text" class="form-control span10"> 

Sau đó, trong Javascript, bất cứ khi nào tôi nạp nguyên tố này với các tùy chọn chính xác, tôi đã phải cập nhật các placeholder qua data() chức năng:

selector.data('placeholder', placeholder); 
selector.select2({ data: new_data_set, tags: true }); 

Đó dường như làm việc mỗi lần bây giờ.

Answer 6

Tôi đang sử dụng Select2 4.0.5 Standard và các giải pháp hiện tại không hoạt động đối với tôi hoặc yêu cầu tạo lại select2 cho mọi bản cập nhật trình giữ chỗ mà tôi muốn tránh.

Tôi đã đưa ra một giải pháp mới, ngay cả khi nó là một hack. Tôi lưu trữ vùng chứa select2 để dễ dàng truy cập vào nó sau đó, khi tôi cần cập nhật trình giữ chỗ, tôi tìm phần tử trình giữ chỗ trong vùng chứa và cập nhật văn bản của trình giữ chỗ:

var selectorSelect2 = $('#selector').data('select2').$container; 
... 
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1'); 
... 
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');