有时候我们展示给用户的表单中的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. C#——System.Diagnostics.Process.Start的妙用

    我们经常会遇到在Winform或是WPF中点击链接或按钮打开某个指定的网址, 或者是需要打开电脑中某个指定的硬盘分区及文件夹, 甚至是"控制面板"相关的东西, 那么如何做呢? 答案 ...

  2. JavaNIO之Channel

    Channel的本质是通道,用来连接JVM之外数据向JVM内传输数据,比如来自于硬盘的文件,来自于网络的数据包.JVM之外的数据就是通过Channel进行数据传输:如果把Channel比作河道,那么作 ...

  3. [JavaScript] js实现简单的代码运行框

    <script type="text/javascript">// <![CDATA[ function runCode(obj) { var winname = ...

  4. python面向对象编程实例解析

    1. 类和函数 面向对象编程的例子: #!/usr/bin/env python # -*- coding: utf-8 -*- class Person(object): #在属性和变量的前面增加“ ...

  5. bzoj 3283: 运算器 扩展Baby Step Giant Step && 快速阶乘

    3283: 运算器 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 184  Solved: 59[Submit][Status][Discuss] D ...

  6. HttpWebRequest提高效率之连接数,代理,自动跳转,gzip请求等设置问题

    先设置4个: [csharp] webrequest.ServicePoint.Expect100Continue = false; //是否使用 Nagle 不使用 提高效率 webrequest. ...

  7. 难搞的EXCHANGE重新安装错误

    Sample Exchange Setup Log III: [8/12/2010 2:59:38 AM] [1] [ERROR] Unable to remove product with code ...

  8. FFMPEG-数据结构解释(AVCodecContext,AVStream,AVFormatContext)

    http://blog.csdn.net/yuan892173701/article/details/8702333 AVCodecContext  这是一个描述编解码器上下文的数据结构,包含了众多编 ...

  9. View以自身中心旋转的代码解惑

    matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY); 经常在中心旋转的应用中看到这段代码. ...

  10. [OJ] Insert Interval

    LintCode #30. Insert Interval (Easy) LeetCode #57. Insert Interval (Hard) class Solution { public: v ...