有时候我们展示给用户的表单中的checkbox，radio，selec等标签的一些项是默认选中的。比方：当用户改动文章的时候，假设相应的栏目为下拉框的话，那么它的默认选中值应该是原来的栏目位置。

能够使用jquery中的val()方法给select、checkbox、radio设置默认选中项。

对于multiple类型的select和checkbox还能够设置多个默认值。

效果图：

方法：

	$("select#multiple").val(["选择2号","选择4号"]);

完整代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery test</title>

<script src="jquery-1.11.1.min.js"></script>

<style type="text/css">

	div

	{

		margin-top:50px;

		margin-left:100px;

	}

</style>

</head>

<body>

<div>

<select id="single">

	<option value="选择1号">选择1号</option>

	<option value="选择2号">选择2号</option>

	<option value="选择3号">选择3号</option>

	<option value="选择4号">选择4号</option>

</select>

</div>

<div>

<select id="multiple" multiple="multiple" style="height:120px;">

	<option value="选择1号">选择1号</option>

	<option value="选择2号">选择2号</option>

	<option value="选择3号">选择3号</option>

	<option value="选择4号">选择4号</option>

</select>

</div>

<div>

<input type="checkbox" value="check1"/>多选1

<input type="checkbox" value="check2"/>多选2

<input type="checkbox" value="check3"/>多选3

<input type="checkbox" value="check4"/>多选4

</div>

<div>

<input type="radio" value="radio1">单选1

<input type="radio" value="radio2">单选2

<input type="radio" value="radio3">单选3

<input type="radio" value="radio4">单选4

</div>

</body>

<script type="text/javascript">

	$("select#single").val(["选择4号"]);

	$("select#multiple").val(["选择2号","选择4号"]);

	$(":checkbox").val(["check1","check3"]);

	$(":radio").val(["radio4"]);

</script>

</html>

使用val()方法设置表单中的默认选中项的更多相关文章

  1. angularjs ng-select ng-options 默认选中项.

    <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf- ...

  2. Android RadioGroup设置默认选中项

    今天有人问.Android 里面 RadioGroup里面有两个RadioButton怎么设置默认值? 第一个RadioButton设置 android:checked="true" ...

  3. php处理表单中的复选框问题以及js实现全选

    做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...

  4. Jquery 根据value值设置下拉列表（select）默认选中项

    方法一: $("#selIndustyType option[value='1']").attr("selected", "selected" ...

  5. jstree前端设置默认选中项

    $("#jstree").on("loaded.jstree", function (event, data) { var currDeptId = crm.g ...

  6. laravel中select2多选，初始化默认选中项

    项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人.使用 select2 插件来完成. select2 的 html 代码如下: <div class="form-group ...

  7. @Html.DropDownListFor默认选中项

    http://q.cnblogs.com/q/73902/ 项目使用mvc4,给dropDownList指定默认值未选中 页面代码是: 1.未有默认选中值 Html.DropDownListFor(m ...

  8. html <select> 用JS控制默认选中项

    <html> <head> <!--禁止页面缓存--><meta http-equiv="content-type" content=&q ...

  9. easyui combobox默认选中项

    今天写前端代码发现combobox还挺难搞, $("#select_Dic").combobox({                        url: "http: ...

随机推荐

  1. raywenderlich-iOS设计模式Part 1/2【译】

    原文地址:http://www.raywenderlich.com/86477/introducing-ios-design-patterns-in-swift-part-1 Update 04/22 ...

  2. makefile中PHONY的重要性

    伪目标是这样一个目标:它不代表一个真正的文件名,在执行make时可以指定这个目标来执行所在规则定义的命令,有时也可以将一个伪目标称为标签.伪目标通过   PHONY来指明. PHONY定义伪目标的命令 ...

  3. C#中判断bool 类型 代码的最短写法

    看到一个关于写最短代码的,  是一个bool类型判断的:    public bool IsNull(object val) { if (val == null) { return true; } e ...

  4. sql server 表空间

    在SqlServer2005中,建表时是默认把所有的表都保存在PRIMARY默认表空间中的.当数据库中表很多,并且数据量很大时,会导致数据库性能严重下降,有必要将一些大的表放到不同的表空间中去.主要的 ...

  5. DM8168 环境搭建(2) ------ 虐心之旅

    续上  ... ... ... (5)安装minicom minicom类似于windows下的超级终端,用于与串口设备通信    参考命令:sudo apt-get install minicom ...

  6. IE filter & z-index bug

    对最近遇到的2个问题的一点总结. 1.IE filter & z-index 重构后的首页即将上线,测试提出fix导航条扩展菜单在ie789滚动后一段无法显示的问题. 疑云重重: 这个问题一开 ...

  7. [BZOJ 3531] [Sdoi2014] 旅行 【离线+LCT】

    题目链接:BZOJ - 3531 题目分析 题目询问一条路径上的信息时,每次询问有某种特定的文化的点. 每个点的文化就相当于一种颜色,每次询问一条路径上某种颜色的点的信息. 可以使用离线算法, 类似于 ...

  8. binder

    Service与Android系统设计(7)--- Binder驱动 http://blog.csdn.net/21cnbao/article/details/8087354 Android Bind ...

  9. 更好的 SQL 模式的 10 条规则

    更好的 SQL 模式的 10 条规则 2015-06-17 11:57:392353浏览1评论 在创建新表和数据仓库时,要做很多决定.一些在当时似乎无关紧要的地方,却让你和用户在数据库的生命期内感到痛 ...

  10. 抽象工厂模式[wiki]

        抽象工厂[编辑] 维基百科,自由的百科全书   跳转至: 导航. 搜索   以统一塑模语言中的类型图来表示抽象工厂 抽象工厂模式(英语:Abstract factory pattern)是一种 ...