Question

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

<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/了解演示

实现多个组合框只会产生一个下拉按钮

1 个答案: