2016-06-20 46 views
5

Tôi có một chọn 2 chọn nhiều tùy chọnSelect2 giá trị mặc định cho nhiều lựa chọn và cho phép thẻ

<select multiple name="event_type[]" class="form-control" id="selectEvents"> 
    @foreach ($eTypes as $type) 
     <option>{{$type}}</option> 
    @endforeach 
</select> 

Tôi muốn thiết lập một số giá trị mặc định chỉ trong trường hợp người dùng sẽ được chỉnh sửa biểu mẫu. tôi đã thực hiện thành công đó bằng cách làm này

var s2 = $("#selectEvents").select2({ 
    placeholder: "Choose event type", 
    tags: true 
}); 

s2.val(["Trade Fair", "CA", "Party"]).trigger("change"); //CA doesn't show as a default 

Nhưng vấn đề là tôi đang cho phép người dùng tạo ra các lựa chọn bằng cách sử dụng tùy chọn tags: true cho Select2.

Khi tôi đặt giá trị mặc định ban đầu trong tùy chọn html thì nó hoạt động, nhưng khi tôi đặt mặc định do người dùng tạo thì nó không hoạt động.

Đây là lần đầu tiên tôi sử dụng select2.

Làm cách nào tôi có thể đạt được điều này?

+0

Xem câu trả lời này khác tại đây: http://stackoverflow.com/a/42576487/1635774 – rafinskipg

Trả lời

6

Làm một chút đào, tôi có thể thấy vấn đề này được nêu ra trên GitHub.

Một tùy chọn là kiểm tra xem liệu giá trị có tồn tại hay không và append nếu không.

var s2 = $("#selectEvents").select2({ 
 
    placeholder: "Choose event type", 
 
    tags: true 
 
}); 
 

 
var vals = ["Trade Fair", "CA", "Party"]; 
 

 
vals.forEach(function(e){ 
 
if(!s2.find('option:contains(' + e + ')').length) 
 
    s2.append($('<option>').text(e)); 
 
}); 
 

 
s2.val(vals).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/> 
 

 
<select multiple name="event_type[]" class="form-control" id="selectEvents"> 
 
    <option>Trade Fair</option> 
 
    <option>Party</option> 
 
    <option>Foo</option> 
 
    <option>Bar</option> 
 
</select>

0

Gần đây tôi đã phải thực hiện một Select2 với các tùy chọn 'nhiều' và 'thẻ' trong một kịch bản PHP, và chạy vào một vấn đề tương tự. Tài liệu này cho biết thêm bất kỳ lựa chọn ban đầu nào dưới dạng thẻ tùy chọn html, nhưng khi tôi cố gắng thêm hai, chỉ một tùy chọn sẽ hiển thị trong điều khiển select2 của tôi.

Tôi đã kết thúc việc khởi tạo điều khiển select2 bằng tùy chọn 'dữ liệu' đối tượng cấu hình, mà tôi sẽ tạo động.

var initialPropertyOptions = []; 
 
@foreach ($model->properties as $initialProperty`) 
 
    var initialPropertyOption = { 
 
     id:   {{ $initialProperty->id }}, 
 
     text:  '{{ $initialProperty->name }}', 
 
     selected: true 
 
    } 
 
    initialPropertyOptions.push(initialPropertyOption); 
 
@endforeach 
 

 
$('#properties').select2({ 
 
    ajax: { 
 
     url:  route('models.propertySearch'), 
 
     dataType: 'json', 
 
     delay:  250, 
 
     processResults: function(data) { 
 
      return { 
 
       results: data 
 
      } 
 
     } 
 
    }, 
 
    placeholder:  'Enter property name', 
 
    minimumInputLength: 1, 
 
    multiple:   true, 
 
    tags:    true, 
 
    data:    initialPropertyOptions 
 
});
<div> 
 
    <label for="properties">Properties</label> 
 
    <select name="properties[]" id="properties"> 
 
    </select> 
 
</div>

Các vấn đề liên quan