一、HTML多選下拉框代碼及基本屬性
HTML多選下拉框可以讓用戶在一個下拉列表中選擇多個選項，相對於單選下拉框而言，更加靈活和方便，因此在網頁開發中應用廣泛。以下為示例代碼：
<select multiple="multiple">
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
</select>
其中，multiple="multiple"屬性表示該下拉框支持多選，選項之間用逗號分隔。每個選項使用<option>標籤表示，value屬性為選項的值，選中後提交表單會提交該值；顯示在頁面上的選項名稱應該在該標籤對中間添加。
要設置默認選中的選項，可以在<option>標籤中添加selected屬性。
二、HTML下拉框多選的實現方法
HTML本身是不支持多選下拉框的，所以需要藉助JavaScript的力量來實現。以下是一種簡單的實現方法：
<select id="testSelect" onchange="updateTextArea()">
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
</select>
<br>
<input type="hidden" id="testInput" name="testInput">
<textarea id="testArea" rows="3"></textarea>
<script type="text/javascript">
function updateTextArea(){
var selectedValues = "";
var selectedTexts = "";
var selectObj = document.getElementById("testSelect");
for(var i = 0; i < selectObj.options.length; i++){
if(selectObj.options[i].selected){
selectedValues += selectObj.options[i].value + ",";
selectedTexts += selectObj.options[i].text + ", ";
}
}
// 去除最後的逗號
selectedValues = selectedValues.substring(0, selectedValues.length - 1);
selectedTexts = selectedTexts.substring(0, selectedTexts.length - 2);
document.getElementById("testInput").value = selectedValues;
document.getElementById("testArea").value = selectedTexts;
}
</script>
實現原理：首先給標籤添加onchange事件，每當用戶選擇或取消選項時觸發該事件。在事件處理函數中，遍歷所有選項，將選中的選項的值和文本內容分別拼接成一個字符串，最後將這兩個字符串分別賦值給一個隱藏域和一個