Jak zmienić szerokość listy rozwijanej za pomocą wtyczki Bootstrap Multiselect dla jQuery?

Question

Używam bootstrapu Davida Sutza multiselect i nie mogę znaleźć sposobu modyfikacji .dropdown-menu na onDropdownShow. Ustawianie szerokości w funkcji poniżej nie działa:

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

Problem leży w $(this) co nie wydaje się być węzeł DOM, chociaż spodziewam go #flavor.

Co próbuję zrobić, to dynamicznie zmieniać szerokość menu w zależności od szerokości okna (zasadniczo sprawiając, że jest on responsywny), więc kod musi być wykonywany za każdym razem, gdy otwierane jest menu. Dodatkowo mam wiele pól wielokrotnego wyboru na mojej stronie, więc naprawdę musi to być funkcja generyczna bez sztywno zakodowanych odniesień do DOM, stąd potrzeba pracy $(this).

Answer 1

Możesz użyć event, aby dowiedzieć się, który przycisk został kliknięty. Stamtąd możesz użyć prostego przejścia przez jQuery, aby znaleźć i edytować menu rozwijane.

Aby mieć inne zachowanie w zależności od tego, które menu zostało otwarte, można wybrać opcję id pierwotnego wyboru. Następnie prawdopodobnie za pomocą innej funkcji zwróci wszelkie wymagane zmiany.

$(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>

nie mogłem znaleźć CDN że gospodarzem css wtyczki tak, styl będzie wyglądać trochę inaczej, ale kod JS wyżej dzieł.

Answer 2

Myślę, że sposób korzystania z najbliższych() powinien zostać zmieniony. Spróbuj użyć elementu tagu zamiast nazwy klasy.

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

Spróbuj tego i daj mi znać, jeśli to nie zadziała.