关于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属性均相同。
关于Html5中的单选与多选的更多相关文章
- Webform之Repeater中的单选和多选的应用以及前段JS的实现
HTML中的代码 <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate&g ...
- dev中ASPxListBox单选和多选的设置
只需要设置SelectionMode,为Multiple时是单选,CheckColumn时是多选
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...
- 如何在Android的ListView中构建CheckBox和RadioButton列表(支持单选和多选的投票项目示例)
引言 我们在android的APP开发中有时候会碰到提供一个选项列表供用户选择的需求,如在投票类型的项目中,我们提供一些主题给用户选择,每个主题有若干选项,用户对这些主题的选项进行选择,然后提交. 本 ...
- 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作
最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...
- vue 表格中的下拉框单选、多选处理
最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...
- HTML <select> 标签 创建单选或多选菜单
所有主流浏览器都支持 <select> 标签. select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中 ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...
随机推荐
- Linux 自定义总线类型
#include <linux/module.h> #include <linux/init.h> #include <linux/device.h> // 按照 ...
- Volley请求图片
ImageRequest imageRequest = new ImageRequest(Config.USER_ASSETS_URL + md5(userid) + "/images/av ...
- Amoeba mysql读写分离搭建及介绍
Amoeba mysql读写分离搭建及介绍 推荐: http://blog.chinaunix.net/uid-20639775-id-154600.html
- SERDES高速系统(一)
在目前主流厂商的高端FPGA 中都集成了SERDES(串并收发单元)硬核,如Altera的Stratix IV GX器件族内部集成的SERDES单通道支持600Mbit/s到8.5Gbit/s数据熟率 ...
- (转)C# Socket简单例子(服务器与客户端通信)
本文转载自:http://blog.csdn.net/andrew_wx/article/details/6629721 这个例子只是简单实现了如何使用 Socket 类实现面向连接的通信. 注意:此 ...
- 分布式开发框架Pebble使用说明
简介 Pebble定位为一个好用.可靠.高性能.易扩展的分布式开发框架,支持多种使用方式: 使用完整的pebble框架 独立使用各pebble子模块 在其他框架中嵌入pebble框架. Pebble具 ...
- apache 2 修改虚拟目录
准备好环境,就要开始进行开发了.这一篇,我们在Ubuntu Apache上配置虚拟目录. 知识准备: 区别于Windows 下apache,配置文件通常只有一个,就是httpd.conf. Linux ...
- 1132 Cut Integer
题意:略. 思路:注意除数可能为0的情况,不然会导致浮点错误. 代码: #include <iostream> #include <string> using namespac ...
- 如何规避javascript多人开发函数重名问题
命名空间 封闭空间 js模块化mvc(数据层.表现层.控制层) seajs(如果了解的呢,可以说) 变量转换成对象的属性 对象化
- Java面向对象-方法的重载
Java面向对象-方法的重载 所谓方法的重载, 类里面有两个或者多个重名的方法,但是方法的参数个数.类型.顺序至少有一个不一样,这时候局构成方法重载: 上代码: package com.java123 ...