2

ここでコードを使用する: http://jqueryui.com/autocomplete/#combobox しかし、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>

次に、次のようにコンボボックスを呼び出します。

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

また

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

ドロップダウン ボタンは 1 つだけになります。div のスタイルから表示インライン ブロックを削除した場合にのみ、複数のボタンが表示されますが、コンボ ボックスが複数の行に表示されます。これは望ましくありません。

4

1 に答える 1

1

ドロップダウンボタンは絶対に配置されているため、ページの通常のフローには影響しません。2番目のコンボボックスを追加すると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/を参照してください。

于 2013-01-05T15:53:02.517 に答える