如何使用 Bootstrap jQuery 的多选插件更改下拉列表的宽度？

Question

我正在使用 David Sutz 的 bootstrap multiselect，但我找不到修改 onDropdownShow 上的 .dropdown-menu 的方法。在下面的函数中设置宽度不起作用：

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

问题出在 $(this) 上，它似乎不是 DOM 节点，尽管我希望它是 #flavor.

我想做的是根据 window 的宽度动态更改菜单的宽度（基本上使其响应），因此每次打开菜单时都需要执行代码.此外，我的页面上有多个多选框，因此它确实需要是一个没有硬编码 DOM 引用的通用函数，因此需要 $(this) 才能工作。

Answer 1

我觉得应该改变closest()的使用方式。尝试使用标签元素，而不是 class 名称。

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

试试这个，如果不起作用请告诉我。

Answer 2

您可以使用 event 找出点击了哪个按钮。从那里您可以使用简单的 jQuery 遍历来查找和编辑下拉菜单。

要根据打开的下拉菜单有不同的行为，可以针对原始 select 的 id。然后可能使用另一个函数 return 所需的任何更改。

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

我找不到托管插件 css 的 CDN，因此样式看起来会有些不同，但上面的 JS 代码有效。

如何使用 Bootstrap jQuery 的多选插件更改下拉列表的宽度？

How to change the width of the dropdown using Bootstrap Multiselect plugin for jQuery?

css

jquery

twitter-bootstrap

bootstrap-multiselect