关于Html5中的单选与多选

1、下拉列表样式：

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

属性列表

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