关于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属性均相同。