如何使用Bootstrap Multiselect jQuery插件更改下拉菜单的宽度？

Question

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

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

问题在于$(this)，它似乎不是一个DOM节点，尽管我期望它是#flavor。

我的目标是根据窗口的宽度动态更改菜单的宽度（基本上使其响应），因此需要每次打开菜单时执行代码。此外，我的页面上有多个多选框，因此它确实需要成为一个通用函数，没有硬编码的DOM引用，这就需要$(this)可用。

- bart

---

你有什么fiddle之类的东西吗？另外，你忘记在结尾加分号了。 - dingo_d

@dingo_d 在末尾不需要分号 ;) 问题已经解决，正确答案已被选定。我的问题的解决方案是将$(this)替换为$(event.currentTarget)。 - bart

Answer 1

您可以使用event来确定单击的是哪个按钮。然后，您可以使用简单的jQuery遍历找到并编辑下拉菜单。

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

$(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代码是有效的。

- stevenw00

---

我在一个页面上有多个多选框。我希望菜单是响应式的，因此在打开时需要根据窗口宽度和多选框位置动态更改菜单的宽度。所以这不能仅仅是一些 CSS。 - bart

上面的示例代码展示了如何针对特定的多选框进行定位。响应性不能通过断点和百分比宽度来控制吗？有没有具体的宽度示例？ - stevenw00

多选框在水平行中相互位置。通过选择第一个多选框中的项目，第二个多选框向右移动，限制其下拉菜单的宽度。这只能通过动态JavaScript解决方案实现。 - bart

我已经编辑了解决方案，这样您就可以针对原始选择的ID拥有一个针对每个菜单的功能。您可以更改代码以使用不同的属性来标识原始选择。 - stevenw00

$(event.currentTarget) 就是我在寻找的，谢谢！ - bart

Answer 2

我认为使用closest()的方式应该改变。尝试使用标签元素，而不是类名。

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

试一下这个，如果不行就告诉我。

- YONGSOO KIM

---

我不想改变“select”元素。该插件实际上隐藏了“select”元素，因此它不会产生任何影响。 - bart