有时候我们展示给用户的表单中的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. Matlab界面语言切换，自由显示中文或英文语言

    Matlab界面语言切换,自由显示中文或英文语言分享给大家,Matlab是一款商业数学软件,广泛使用于算法的开发.数据发现和数值计算等.不同用户对Matlab显示的语言需求也不一样,一用户习惯使用中文 ...

  2. eclipse中配置c++开发环境 Eclipse + CDT + MinGW

    转自eclipse中配置c++开发环境 Eclipse + CDT + MinGW 基本框架:Eclipse + CDT + MinGW 背景知识: CDT:CDT 是完全用 Java 实现的开放源码 ...

  3. [ecmall]Ecmall 后台添加模板编辑区

    例如,想把品牌/index.php?app=brand页面做成可编辑的. 首先,找到后台admin\includes\menu.inc.php第61行 'template' => array( ...

  4. AJAX里调用AJAX，作定时进度刷新

    这个确实搞了一段时间,但成就感有啦... 哈哈,这个自动部署平吧,异步队列CELERY+REDIS,发布进度实时AJAX的技术点全部打通!!! 而获取实时进度,我用的是RESTFUL FRAMEWOR ...

  5. WEB 开发异常：java.lang.ClassNotFoundException

    某个类明明是有的,可是eclipse 启动tomcat服务器运行web项目,出现如题异常. java.lang.ClassNotFoundException 信息: Set web app root ...

  6. 李洪强iOS开发Swift篇---12_NSThread线程相关简单说明

    李洪强iOS开发Swift篇---12_NSThread线程相关简单说明 一 说明 1)关于多线程部分的理论知识和OC实现,在之前的博文中已经写明,所以这里不再说明. 2)该文仅仅简单讲解NSThre ...

  7. 利用TEA算法进行数据加密

    TEA(Tiny Encryption Algorithm)是一种小型的对称加密解密算法,最初是由剑桥计算机实验室的 David Wheeler 和 Roger Needham 在 1994 年设计. ...

  8. 任正非：华为三十年大限快到了 想不死就得新生（建立战略预备队）cool

    华为心声社区官方微信今日发布了任正非8月15日在华为公司内部做的关于战略预备队建设汇报的讲话.讲话内容中提到,华为公司需要组织.结构.人才等所有一切都变化,通过变化使新的东西成长起来.   任正非表示 ...

  9. Android Training精要（三）不同分辨率图片缩放倍数

    各DPI图片倍率 xhdpi: 2.0 hdpi: 1.5 mdpi: 1.0 (baseline) ldpi: 0.75 这就意味着如果有一张xhdpi下200*200的图片, 你应该提供同样的图片 ...

  10. 谈谈SpringMVC Validation

    2016-10-12 19:26:08,897 [INFO ] [http-nio-8032-exec-1] HttpHeaderValidator:84 - HttpHeaderValidator. ...