Wie ändere ich die Breite des Dropdowns mit Bootstrap Multiselect Plugin für jQuery?

Question

Ich benutze David Sutz Bootstrap multiselect und ich kann keinen Weg finden, um die .dropdown-menu auf onDropdownShow zu ändern. Einstellen der Breite in der Funktion unten nicht funktioniert:

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

Das Problem liegt in der $(this), die scheint nicht zu einem DOM-Knoten zu sein, obwohl ich es #flavor erwarten.

Was ich versuche, ist die dynamische Änderung der Menübreite abhängig von der Breite des Fensters (grundsätzlich reaktionsfähig), so dass der Code jedes Mal ausgeführt werden muss, wenn das Menü geöffnet wird. Außerdem habe ich mehrere Multiselect-Boxen auf meiner Seite, so dass es wirklich eine generische Funktion ohne fest codierte DOM-Referenzen sein muss, daher muss $(this) funktionieren.

Answer 1

Sie können die event verwenden, um herauszufinden, auf welche Schaltfläche geklickt wurde. Von dort aus können Sie mit dem einfachen jQuery-Traversal das Dropdown-Menü finden und bearbeiten.

Um ein unterschiedliches Verhalten zu haben, basierend auf dem Dropdown-Menü, ist es möglich, die id der ursprünglichen Auswahl zu wählen. Dann wahrscheinlich eine andere Funktion verwenden, um alle erforderlichen Änderungen zurückzugeben.

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

ich kein CDN, die das Plugin-CSS-hosted finden konnte so der Stil ein wenig anders aussehen, aber die JS-Code oben genannten Arbeiten.

Answer 2

Ich denke, die Art der Verwendung von engsten() sollte geändert werden. Verwenden Sie das Tag-Element anstelle des Klassennamens.

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

Versuchen Sie dies und lassen Sie mich wissen, wenn dies nicht funktioniert.