如何使用Bootstrap Multiselect插件来更改下拉列表的宽度？

发布时间：2020-12-18 00:20:39 所属栏目：安全来源：网络整理

导读：我使用David Sutz的引导 multiselect,我找不到一种方法来修改onDropdownShow上的.dropdown菜单.设置下面功能中的宽度不起作用： $('#flavor').multiselect({ onDropdownShow: function(event) { $(this).closest('.dropdown-menu').css('width','500px') }})

我使用David Sutz的引导 multiselect,我找不到一种方法来修改onDropdownShow上的.dropdown菜单.设置下面功能中的宽度不起作用：

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

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

我想要做的是根据窗口的宽度(基本上使其响应)来动态地更改菜单的宽度,因此每次打开菜单时都需要执行代码.此外,我的页面上有多个多重选择框,所以它真的需要一个通用的功能,没有硬编码的DOM引用,所以需要$(这个)工作.

解决方法

您可以使用该事件来查找哪个按钮被点击.从那里你可以使用简单的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代码可以工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!