關於Html5中的單選與多選

1、下拉列表樣式：

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

屬性列表

autofocus	autofocus	規定在頁面加載后文本區域自動獲得焦點。
disabled	disabled	規定禁用該下拉列表。
form	form_id	規定文本區域所屬的一個或多個表單。
multiple	multiple	規定可選擇多個選項。
name	name	規定下拉列表的名稱。
required	required	規定文本區域是必填的。
size	number	規定下拉列表中可見選項的數目。

1.1 單選按鈕

<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female

一般用<label>加以限定。Input高級功能http://www.w3school.com.cn/tags/tag_input.asp

 

2.多選列表框　

<select  multiple="multiple">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

可規定選項組：

http://www.w3school.com.cn/tags/tag_optgroup.asp

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

 

2.1、多選按鈕

<input type="checkbox" name="sex" value="male" /> Male
<input type="checkbox" name="sex" value="female" /> Female

3、input中也有multiple屬性，不過他是用在type="file"中的，用於上傳文件多選的。

 

4、取select的值。對於下拉列表來說，表單提交時是會自動提交該值的，值為selectName:selectedValue形式。

對於多選列表框，提交時也是數組形式，同多選按鈕

 o = document.getElementById("lbTest");
            var intvalue="";
            for(i=0;i<o.length;i++){   
                if(o.options[i].selected){
                    intvalue+=o.options[i].value+",";
                }
            }

作為數組訪問

(PS：該元素是一個HTML特殊元素，叫做HTMLSELECTELEMENT，對象參考http://www.w3school.com.cn/jsref/dom_obj_select.asp)

JQuery可用

var realvalues = [];
var textvalues = [];
$('#rightItem :selected').each(function(i, selected) {
    realvalues[i] = $(selected).val();
    textvalues[i] = $(selected).text();
});

方式訪問

對於多選按鈕，提交時是一個數組，規定多選按鈕的name屬性均相同。