Làm thế nào để thay đổi chiều rộng của trình đơn thả xuống bằng cách sử dụng plugin Bootstrap Multiselect cho jQuery?

Question

Tôi đang sử dụng bootstrap của David Sutz multiselect và tôi không thể tìm thấy cách sửa đổi số .dropdown-menu trên onDropdownShow. Thiết lập chiều rộng trong hàm dưới không hoạt động:

$('#flavor').multiselect({ 
    onDropdownShow: function(event) { 
     $(this).closest('.dropdown-menu').css('width','500px') 
    } 
}); 

Vấn đề đặt trong $(this) mà dường như không có một nút DOM, mặc dù tôi hy vọng nó sẽ #flavor.

Điều tôi đang cố làm là tự động thay đổi chiều rộng của trình đơn tùy thuộc vào chiều rộng của cửa sổ (về cơ bản khiến nó đáp ứng), vì vậy mã cần được thực thi mỗi khi menu được mở. Ngoài ra tôi có nhiều hộp đa lựa chọn trên trang của mình, vì vậy nó thực sự cần phải là một hàm chung mà không có tham chiếu DOM được mã hóa cứng, do đó cần có $(this) để hoạt động.

Answer 1

Bạn có thể sử dụng số event để tìm nút nào được nhấp. Từ đó bạn có thể sử dụng jQuery traversal đơn giản để tìm và chỉnh sửa menu thả xuống.

Để có hành vi khác nhau dựa trên menu thả xuống đã được mở, bạn có thể nhắm mục tiêu id của lựa chọn gốc. Sau đó, có thể sử dụng một hàm khác để trả về bất kỳ thay đổi nào được yêu cầu.

$(document).ready(function() { 
 
    $('.dropdowns').multiselect({ 
 
    onDropdownShow: function(event) { 
 
     var menu = $(event.currentTarget).find(".dropdown-menu"); 
 
     var original = $(event.currentTarget).prev("select").attr("id"); 
 
     
 
     // Custom functions here based on original select id 
 
     if (original === "flavour") menu.css("width", 500); 
 
     if (original === "flavour2") menu.css("background", "red"); 
 
     
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<select id="flavour" class="dropdowns" multiple="multiple"> 
 
    <option value="cheese">Cheese</option> 
 
    <option value="tomatoes">Tomatoes</option> 
 
    <option value="mozarella">Mozzarella</option> 
 
    <option value="mushrooms">Mushrooms</option> 
 
    <option value="pepperoni">Pepperoni</option> 
 
    <option value="onions">Onions</option> 
 
</select> 
 

 
<select id="flavour2" class="dropdowns" multiple="multiple"> 
 
    <option value="cheese">Cheese</option> 
 
    <option value="tomatoes">Tomatoes</option> 
 
    <option value="mozarella">Mozzarella</option> 
 
    <option value="mushrooms">Mushrooms</option> 
 
    <option value="pepperoni">Pepperoni</option> 
 
    <option value="onions">Onions</option> 
 
</select>

tôi không thể tìm thấy một CDN rằng tổ chức css của plugin nên phong cách sẽ xem xét một chút khác nhau, nhưng mã JS trên công trình.

Answer 2

Tôi nghĩ cách sử dụng gần nhất() nên được thay đổi. Thử sử dụng phần tử thẻ, thay vì tên lớp.

$('#flavor').multiselect({ 
    onDropdownShow: function(event) { 
     $(this).closest('select').css('width','500px') 
    } 
}); 

Hãy thử điều này và cho tôi biết nếu cách này không hiệu quả.