2017-12-19 21 views
5

Tôi có một thả xuống select2 với 4 tùy chọn mã này là:Select2 Dropdown Nhiều lựa chọn và bỏ chọn

<select id="ddlInqOn" class="InqSelect2 form-control"> 
    <option value="1">--All--</option> 
    <option value="2">Today Date</option> 
    <option value="3">Past Date</option> 
    <option value="4">Feature Date</option> 
</select> 

select2 gọi của thành viên này javascript:

$('.InqSelect2').select2({ 
    dropdownAutoWidth: 'true', 
    multiple: true 
}); 

tôi muốn đạt được như khi tôi nhấp vào tất cả các tùy chọn sau đó xóa các tùy chọn khác và nếu tùy chọn khác được chọn thì hãy xóa tất cả tùy chọn khỏi lựa chọn.

Tôi đã thử mã này:

$('body').on('change', '#ddlInqOn', function() { 
    debugger; 
    // 
}); 

nhưng sự kiện thay đổi không triggred vì vậy bất kỳ khả năng khác để theo dõi sự kiện thay đổi của Select2 thả xuống?

Trả lời

1

trả lời do @Nimeksha hoạt động hoàn hảo trong jsfiddle do @ Nimeshka nhưng trong mã của tôi tôi không thể có được kích hoạt sự kiện thay đổi trong danh sách thả xuống và sau khi tìm kiếm tôi tìm thấy giải pháp từ here. mã là ở đây:

$(document).on('change', '.InqSelect2', function() { 
     debugger; 
     if (e.params.data.id == 1) { 
      $(this).val(1).trigger('change'); 
     } else { 
      values = $(this).val(); 
      var index = values.indexOf('1'); 

      if (index > -1) { 
       values.splice(index, 1); 
       $(this).val(values).trigger('change'); 
      } 
     } 
    }); 

tôi cũng đã cố gắng:

$('body').on('change', '.InqSelect2', function() { 
     debugger; 
     if (e.params.data.id == 1) { 
      $(this).val(1).trigger('change'); 
     } else { 
      values = $(this).val(); 
      var index = values.indexOf('1'); 

      if (index > -1) { 
       values.splice(index, 1); 
       $(this).val(values).trigger('change'); 
      } 
     } 
    }); 

nhưng nó không hoạt động. cũng bởi id #ddlInqOn không hoạt động.

lý do mã ở trên hoạt động với $(document).on('change', '.InqSelect2', function() {}); không hoạt động nhưng nó hoạt động đối với tôi.

cảm ơn lại @Nimeshka

3

Select2 sử dụng hệ thống sự kiện jQuery. Vì vậy, bạn có thể đính kèm vào các sự kiện select2 bằng cách sử dụng phương thức JQuery on.

Sau đó, bạn có thể đặt giá trị của phần tử chọn và kích hoạt sự kiện change để cập nhật hộp chọn.

Bạn có thể làm những gì bạn đã yêu cầu theo cách sau.

$('.InqSelect2').on('select2:select', function (e) { 

    if (e.params.data.id == 1){ 
     $(this).val(1).trigger('change'); 
    }else{ 
     values = $(this).val(); 
     var index = values.indexOf('1'); 

     if (index > -1) { 
      values.splice(index, 1); 
      $(this).val(values).trigger('change'); 
     } 
    } 
}); 

Lưu ý rằng tôi đã sử dụng '1' làm giá trị của tùy chọn --All--. Hãy hỏi tôi bất cứ điều gì nếu nó không rõ ràng cho bạn.

https://jsfiddle.net/c6yrLoow/

Hy vọng nó sẽ giúp :)

+0

chức năng này không được gọi là –

+0

bạn nhận được gì? bất kỳ lỗi nào? và phiên bản select2 bạn sử dụng là gì? –

+0

không có lỗi chỉ không thể nhận được gọi là chức năng hoặc không thể có được sự kiện được gọi và sử dụng select2 4.0.3 –

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