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

关于Html5中的单选与多选的更多相关文章

  1. Webform之Repeater中的单选和多选的应用以及前段JS的实现

    HTML中的代码 <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate&g ...

  2. dev中ASPxListBox单选和多选的设置

    只需要设置SelectionMode,为Multiple时是单选,CheckColumn时是多选

  3. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  4. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  5. 如何在Android的ListView中构建CheckBox和RadioButton列表(支持单选和多选的投票项目示例)

    引言 我们在android的APP开发中有时候会碰到提供一个选项列表供用户选择的需求,如在投票类型的项目中,我们提供一些主题给用户选择,每个主题有若干选项,用户对这些主题的选项进行选择,然后提交. 本 ...

  6. 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

    最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...

  7. vue 表格中的下拉框单选、多选处理

    最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...

  8. HTML <select> 标签 创建单选或多选菜单

    所有主流浏览器都支持 <select> 标签. select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中 ...

  9. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...

随机推荐

  1. BroadcastReceiver用法

    动态注册广播接收器 1.创建一个Receiver继承BroadcastReceiver,并重写onReceiver() 2.在Activity的OnCreate()中添加广播接收器想要接收的actio ...

  2. 命令行调用远程dubbo服务

    有时需要对dubbo服务做个简单的测试,或者想看下某个dubbo服务类所提供的方法,可以直接在命令行通过telnet的方式来查看和调用dubbo服务,方法如下: telnet 127.0.0.1 20 ...

  3. 解决在“Resources”参数中指定了项“obj\Debug\KaiShiHID.Form1.resources”多次。“Resources”参数不支持重复项

    错误截图: 发生原因描述: 窗体Form1, 有一个分部类; 叫做FormPartial.cs; 双击了FormPartial这个窗体, 然后生成了一个Load事件, 即时就报了编译错误, 然后就删除 ...

  4. Cassandra学习六 一些知识点

    http://www.flyml.net/2016/09/08/cassandra-tutorial-java-api-example/ Cassandra对查询的支持很弱,只支持主键列及索引列的查询 ...

  5. 用Dos黑窗口运行Cmd命令

    public class BlackWindow { private static BlackWindow _instance; public static BlackWindow Instance ...

  6. 第十二章 Java内存模型与线程(待续)

    ············

  7. Java两种延时——thread和timer

    在Java中有时候需要使程序暂停一点时间,称为延时.普通延时用Thread.sleep(int)方法,这很简单.它将当前线程挂起指定的毫秒数.如 try { Thread.currentThread( ...

  8. IDEA中快速排除maven依赖

    选中该模块 点击show dependenties 切换试图 选中要排除的依赖,右击 选择Execlude,然后选择需要在哪个模块添加排除依赖 完成

  9. LINUX的SSH下FTP到远程服务器Entering Passive Mode失败解决

    LINUX 系统FTP连接远程服务器经常出现在传输文件或者发出 ls命令时候出现 "Entering Passive Mode "然后就再也无法运作了.该工作主要是因为LINUX的 ...

  10. [转] const T、const T*、T *const、const T&、const T*& 的区别

    这里的T指的是一种数据类型,可以是int.long.doule等基本数据类型,也可以是自己类型的类型class.单独的一个const你肯定知道指的是一个常量,但const与其他类型联合起来的众多变化, ...