关于Html5中的单选与多选

1、下拉列表样式：

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

属性列表

autofocusautofocus规定在页面加载后文本区域自动获得焦点。disableddisabled规定禁用该下拉列表。formform_id规定文本区域所属的一个或多个表单。multiplemultiple规定可选择多个选项。namename规定下拉列表的名称。requiredrequired规定文本区域是必填的。sizenumber规定下拉列表中可见选项的数目。

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

转载于:https://www.cnblogs.com/guangshan/p/4475488.html

相关资源：多选下拉菜单控件（HTML)