Css：制作一個更漂亮一些的多選列表框_Web標準教程

我認為多選列表具有完美的功能——只需按下Ctrl鍵，同時點擊鼠標從列表中選擇多個項目。以下是一個典型的多選列表框：

選出你最喜愛的快餐：

上面那個列表框的代碼如下：

以下為引用的內(nèi)容：

<form method="get" action="">

<b>Check your favorite fast food:</b><br/>

<SELECT MULTIPLE SIZE=5 name="favorites">

<OPTION VALUE="McDonalds">McDonald's</option>

<OPTION VALUE="BurgerKing">Burger King</option>

<OPTION VALUE="Wendys">Wendy's</option>

<OPTION VALUE="JackInTheBox">Jack in the Box</option>

<OPTION VALUE="KFC">KFC</option>

<OPTION VALUE="TacoBell">Taco Bell</option>

</SELECT>

<br/><input type="submit" value="Choose">

</form>

事實上，即使你在頁面中添加了用法說明，仍然有用戶不知道如何使用多選列表框。另外，給每個項目增加額外的標題確實會有幫助，但用一個普通的多選列表框能否達到那個目的，我還不能確定。

不過，我確實清楚知道，用一些CSS和一小段JavaScript，你就能生成一個更漂亮一點的多選列表框，并且還可以建立一個等同于普通多選列表框的URL。那樣，你就不用修改處理列表框的后端代碼——而只需要美化前端即可。

你首先從CSS開始，建立一個新多選列表框在其中滾動的小區(qū)域。我們還可以建立懸浮效果，當(dāng)鼠標移動到一個項目上時，背景色就會改變，以突出當(dāng)前選擇。

以下為引用的內(nèi)容：

<style>

.checklist {

border: 1px solid #ccc;

list-style: none;

height: 10em;

overflow: auto;

width: 20em;

}.checklist, .checklist li { margin: 0; padding: 0; }

.checklist label {

display: block;

padding: 0 0.2em 0 25px;

text-indent: -25px;

}

.checklist label:hover { background: #777; color: #fff; }

* html .checklist label { height: 1%; }

</style>

至于JavaScript，你基本上只希望建立一個等同于常規(guī)多選列表框的URL。以上面的多選列表框為例，其查詢字符串如下：

?favorites=Wendys&favorites=KFC

那就是我們希望仿效的地方。這段腳本只是利用外觀(form)對象，循環(huán)所有檢驗欄(checkbox)的thru looking，并為那些選中的項目建立URL。很明顯，這段腳本只應(yīng)用于所有檢驗欄元素都位于新多選列表框的情況。

以下為引用的內(nèi)容：

<script type="text/javascript">

function submitForm(f) {

var cb = f.getElementsByTagName("input");

var favorites = "favorites=";

var isFirst = true;for (var i = 0; i < cb.length; i++) {

var curr = cb[i];

if (curr.type == "checkbox") {

// window.alert(curr.name + ": " + curr.type);

if (curr.checked) {

if (isFirst) {

favorites = "favorites=" + curr.name;

isFirst = false;

} else {

favorites = favorites + "&favorites=" + curr.name;

}

}

}

}

window.location = f.action + "?" + favorites;

}

</script>

最后，經(jīng)過簡單改進的新多選列表框的代碼如下：

以下為引用的內(nèi)容：

<form method="get" action="">

<b>Check your favorite fast food:</b><br/>

<ul class="checklist">

<li><label><input type="checkbox" name="McDonalds" /><b>McDonalds</b><br/>I'm lovin' it</label></li>

<li><label><input type="checkbox" name="BurgerKing" /><b>Burger King</b><br/>Have it your way</label></li>

<li><label><input type="checkbox" name="Wendys" /><b>Wendy's</b><br/>Always fresh, never frozen</label></li>

<li><label><input type="checkbox" name="JackInTheBox" /><b>Jack in the Box</b><br/>If it doesn't get all over the place, it doesn't belong in your face</label></li>

<li><label><input type="checkbox" name="KFC" /><b>KFC</b><br/>Finger lickin' good</label></li>

<li><label><input type="checkbox" name="TacoBell" /><b>Taco Bell</b><br/>Think outisde the bun</label></li>

</ul>

<input type="button" value="Choose" onclick="submitForm(this.form);">

</form>

不幸的是，TechRepublic網(wǎng)站大量應(yīng)用CSS，因此當(dāng)我在博客中試用這段樣本代碼時，它顯得非常難看。我可不希望為避免沖突而把代碼修改得一團糟——這里我只是努力想說明其中的基本理論。

因此，我在自己的個人網(wǎng)站上用這段代碼發(fā)布了一個簡單的文件，你可以通過它了解代碼的用法。