Question

我想如何创建一个包含垂直滚动条的列表框..

Answer 1

您确保列表中的项目多于size属性，如果您希望一次选择多个选项，请使用multiple：

<select size="2" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Answer 2

您在寻找<select multiple="multiple">吗？

<select multiple="multiple" size="4">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

请参阅w3schools on select。

Answer 3

我看到你正在使用JSF。您不一定需要普通的香草HTML。在真正的JSF中，您可以使用<h:selectManyListbox>组件呈现<select multiple="multiple">元素。这是一个基本的例子：

<h:form>
    <h:selectManyListbox value="#{bean.selectedItems}">
        <f:selectItems value="#{bean.selectItems" />
    </h:selectManyListbox>
    <h:commandButton value="submit" action="#{bean.submit}" />
</h:form>

支持如下：

@ManagedBean
public class Bean {
    private List<String> selectedItems = new ArrayList<String>();
    private List<SelectItem> selectItems = new ArrayList<SelectItem>();
    // Add/generate getters and setters.

    public Bean() {
        // Prepopulate selectable items for display.
        this.selectItems.add(new SelectItem("value1", "label1"));
        this.selectItems.add(new SelectItem("value2", "label2"));
        this.selectItems.add(new SelectItem("value3", "label3"));

        // If necessary you can also preselect items here.
        this.selectedItems.add("value2"); // Will preselect "value2".
    }

    public String submit() {
        // Do your thing with selected items.
        System.out.println("Selected items: " + this.selectedItems);
        return "navigationCaseOutcome";
    }
}

您可以使用CSS通过组件的size，styleClass和/或style属性来控制布局，就像在普通的HTML中一样。

Answer 4

如果您的意思是<ul/>这样的列表框，请考虑以下代码：

HTML:
<ul id="listbox">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li>et cetera</li>
</ul>

CSS:
#listbox {
    height: 150px;
    overflow-y: scroll;
}

如何在列表框中放置滚动条？

4 个答案: