在網(wǎng)站建設(shè)中獲取下拉菜單的值與獲取文本框的值完全相同，由于列表框允許多選，所以在獲取列表框的值時，可以模仿復(fù)選框組的方法獲取用戶提交的值。下面示例演示如何快速獲取用戶提交的列表框值，并以按鈕的形式顯示出來，效果如下圖所示。

【操作步驟】

第1步，打開模板頁（orig.html），另存為in-dex.html。

第2步，把光標(biāo)置于<div class="container">標(biāo)簽中，然后選擇【插入】|【表單】|【表單】命令，在當(dāng)前光標(biāo)位置插入一個表單框。

第3步，選中表單框<form>標(biāo)簽，在【屬性】面板中設(shè)置action和metho屬性值，定義請求文件為同目錄下的request.php，請求的方式為POST。

第4步，把光標(biāo)置于<form>標(biāo)簽內(nèi)，插入一個列表框和一個提交按鈕，定義列表框的name屬性值為interest[]，定義列表選項的屬性值分別為“體育”、“音樂”、“計算機”和“英語”；定義提交按鈕的value屬性值為“提交數(shù)據(jù)”，如圖17.24所示。

第5步，切換到代碼視圖，可以看到設(shè)計完整的表單結(jié)構(gòu)代碼如下：

<div class="container">    <form id="form1" name="form1" method="post" action="request.php">        <label for="interest">興趣</label>        <select name="interest[]" id="interest" size="4" multiple class="form-control">            <option value="體育">體育</option>            <option value="音樂">音樂</option>            <option value="計算機">計算機</option>            <option value="英語">英語</option>        </select><br>        <input type="submit" value="提交數(shù)據(jù)" class="btn btn-success btn-block" />    </form></div>

第6步，選擇【文件】|【另存為】命令，把index.html另存為request.php。在request.php文檔中，清除表單結(jié)構(gòu)。然后在<div class="con-tainer">標(biāo)簽中輸入文本“您的興趣是：”，在【屬性】面板中設(shè)置“格式”為三級標(biāo)題。

第7步，按Enter鍵另起一行，切換到代碼視圖，編寫PHP腳本，使用$_POST["interest"]讀取用戶選擇的值，結(jié)合for循環(huán)語句就可以輸出所有被選中的選項值，完成后的腳本如下：

<div class="btn-group-vertical">    <?php    $interest = $_POST["interest"];    if($interest != nul){                            //判斷列表框的返回值是否為空        for($i=0;$i<count($interest);$i++)           //通過for循環(huán)輸出選中的列表框的值            echo  '<div class="btn btn-primary">'.$interest[$i].'</div>';    }?></div>

第8步，在瀏覽器中預(yù)覽index.html頁面，然后在列表框中選中多個選項，單擊【提交數(shù)據(jù)】按鈕提交表單，則在打開的request.php頁面中立即顯示所有被選擇的列表項目。