实施多个组合框仅需一个下拉按钮

Question

在此处使用代码： http : //jqueryui.com/autocomplete/#combobox但是，用类替换id会产生几乎所需的功能...只是所有combox框只有一个下拉按钮。 如何获得每个组合框的下拉按钮？

<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>

然后像这样调用comboxbox：

 $("#tag01").combobox();
 $("#tag02").combobox();

要么

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

结果只有一个下拉按钮。 仅当我从div样式中删除显示嵌入式块时，我才会获得多个按钮，但是combox框位于多行上-我不希望这样。

Answer 1

下拉按钮的位置绝对正确，这意味着它不会影响页面的正常流程。 当您添加第二个组合框时，容器元素中与position: relative的组合将导致一个堆叠在按钮顶部的框。 在.ui-widget元素的右侧保留一些空间可以解决此问题。

例如，

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

有关演示，请参见http://jsfiddle.net/YH3ep/3/