Как изменить ширину выпадающего списка с помощью модуля Bootstrap Multiselect для jQuery?

Я использую bootstrap David Sutz multiselect, и я не могу найти способ изменить .dropdown-menu на onDropdownShow. Установка ширины в приведенной ниже функции не работает:

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

Проблема лежит в $(this), которая не кажется DOM node, хотя я ожидаю, что она будет #flavor.

То, что я пытаюсь сделать, это динамически изменять ширину меню в зависимости от ширины окна (в основном делая его отзывчивым), поэтому код необходимо выполнять каждый раз, когда открывается меню. Кроме того, у меня на моей странице несколько многосегментных ящиков, поэтому на самом деле это должна быть общая функция без жестко закодированных ссылок DOM, поэтому нужно, чтобы $(this) работал.

Ответ 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>

Ответ 2

Я думаю, что способ использования ближайшего() следует изменить. Попробуйте использовать элемент тега вместо имени класса.

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

Попробуйте это и сообщите мне, если это не сработает.