如何在列表框中放置滾動條？

Question

我想如何創建一個帶有垂直滾動條的列表框。

Answer 1

我看到您使用的是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"; 
    } 
} 

您可以通過size，styleClass和/或組件的style屬性使用CSS控制佈局，完全相同的方式就像你在普通香草HTML中所做的一樣。

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

您確保沒有在列表比大小的屬性，如果你希望能夠一次選擇多個選項使用多個多個項目：

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

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