Javascript 实现多个组合框只会导致一个下拉按钮

在此处使用代码： 但是用类替换id几乎可以实现所需的功能。。。除了所有组合框只有一个下拉按钮。如何获得每个组合框的下拉按钮？

<div class="ui-widget" style="display: inline-block;" >
  <select id="tag01" class="comboBox">
    <option value="">Select one...</option>
      <c:forEach items="${allTags}" var="tag">
        <option value="${tag.title}">${tag.title}</option>
      </c:forEach>
   </select>
</div>
<div class="ui-widget" style="display: inline-block;" >
  <select id="tag02" class="comboBox">
    <option value="">Select one...</option>
    <c:forEach items="${allTags}" var="tag">
      <option value="${tag.title}">${tag.title}</option>
    </c:forEach>
  </select>
</div>

或

---

结果只有一个下拉按钮。只有当我从div样式中删除display inline block时，我才能得到多个按钮，但是combox框在多行上-我不希望出现这种情况。

下拉按钮处于绝对位置，这意味着它不会影响页面的正常流动。添加第二个组合框时，容器元素中与

position:relative

的组合将导致一个堆叠在按钮顶部的框。在

.ui小部件

元素的右侧留下一些空间可以解决这个问题

比如说,

<div class="ui-widget" style="display: inline-block; margin-right:40px">
  <select id="tag01" class="comboBox">
    ...
   </select>
</div>

...

---

请参阅演示

您能提供演示吗？@KarSho无法导入jquery ui至少只发布一些您的代码。您是否使用了正确的css和小部件功能？检查拼写“.combox”……对不起，我不知道你错在哪里了

 $(".comboBox").combobox();

<div class="ui-widget" style="display: inline-block; margin-right:40px">
  <select id="tag01" class="comboBox">
    ...
   </select>
</div>