javascript - 样式化 2 个不同类的 jQuery UI 选择菜单

Question

我想为我网站上的选择菜单提供 2 种不同的样式(类)。我不想使用 ID，因为同一页面上可能有许多下拉菜单。

例如:

<div class="row">
  <select class="style1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
  </select>

  <select class="style1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
  </select>

  <select class="style2">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
  </select>
</div>

但是，当我使用 javascript 调用创建选择菜单时:

$("select").selectmenu();

它不会将类名传递给它创建的选择菜单(它只会创建一个基于原始加“-button”的 id)。

有没有一种方法可以使用类来设置 jQuery UI 选择菜单的样式？

谢谢。

Answer 1

由于 jQuery UI 创建的新选择总是紧跟在标记中的原始选择之后，我能够通过使用相邻的兄弟选择器 (+) 找到解决方案。

在 CSS 中:

select.style1 + .ui-selectmenu-button{}
select.style2 + .ui-selectmenu-button{}

如果有人有替代解决方案，请随时分享，谢谢!