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

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

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

效果图：

方法：

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

完整代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jquery test</title>
  6. <script src="jquery-1.11.1.min.js"></script>
  7. <style type="text/css">
  8. 	div
  9. 	{
  10. 		margin-top:50px;
  11. 		margin-left:100px;
  12. 	}
  13. </style>
  14. </head>
  15.  
  16. <body>
  17. <div>
  18. <select id="single">
  19. 	<option value="选择1号">选择1号</option>
  20. 	<option value="选择2号">选择2号</option>
  21. 	<option value="选择3号">选择3号</option>
  22. 	<option value="选择4号">选择4号</option>
  23. </select>
  24. </div>
  25. <div>
  26. <select id="multiple" multiple="multiple" style="height:120px;">
  27. 	<option value="选择1号">选择1号</option>
  28. 	<option value="选择2号">选择2号</option>
  29. 	<option value="选择3号">选择3号</option>
  30. 	<option value="选择4号">选择4号</option>
  31. </select>
  32. </div>
  33. <div>
  34. <input type="checkbox" value="check1"/>多选1
  35. <input type="checkbox" value="check2"/>多选2
  36. <input type="checkbox" value="check3"/>多选3
  37. <input type="checkbox" value="check4"/>多选4
  38. </div>
  39. <div>
  40. <input type="radio" value="radio1">单选1
  41. <input type="radio" value="radio2">单选2
  42. <input type="radio" value="radio3">单选3
  43. <input type="radio" value="radio4">单选4
  44. </div>
  45. </body>
  46. <script type="text/javascript">
  47. 	$("select#single").val(["选择4号"]);
  48. 	$("select#multiple").val(["选择2号","选择4号"]);
  49. 	$(":checkbox").val(["check1","check3"]);
  50. 	$(":radio").val(["radio4"]);
  51. </script>
  52. </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. S3C2440触摸屏控制总结

    触摸屏控制原理,其实与ADC读取一个滑动变阻器中间触点电压的原理一样.只不过,读取触摸屏的X.Y方向上的电压需要两次,而且需要设置其工作模式以实现一个ADC读取两个通道的电压. S3C2440的ADC ...

  2. 【转】.Net程序员玩转Android系列之三~快速上手

    原文:http://www.cnblogs.com/HouZhiHouJueBlogs/p/3962122.html 快速环境搭建和Hello World 第一步:JAVA SDK(JDK)的安装: ...

  3. textarea宽度、高度自动适应处理方法

    textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...

  4. Http 与 Socket 区别

    HTTP:超文本传输协议,首先它是一个协议,并且是基于TCP/IP协议基础之上的应用层协议.TCP/IP协议是传输层协议,主要解决数据如何在网络中传输,HTTP是应用层协议,主要解决如何包装数据.HT ...

  5. HTML标签与表格

    1.打开DREAMWEAVER,新建HTML,如下图: 2.body的属性: bgcolor 页面背景色 background    背景壁纸.图片 text  文字颜色 topmargin   上边 ...

  6. listview异步加载sd卡图片

    package com.example.gridview; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  7. tar 解压命令

    1.tar.gz文件的解压 tar zxvf  *.tar.gz 2.bz2属性的解压 tar jxvf  *.bz2

  8. pcDuino汉化方法

    1,打开终端:2,在终端输入命令 sudo apt-get update 更新一下软件源3, 输入命令下载中文支持包 sudo apt-get install language-pack-gnome- ...

  9. 漫谈CSS的渲染效率

    总结了部分所学.所听.所看.所问的一些CSS写作经验,书写高效的CSS - 漫谈CSS的渲染效率,它们与渲染效率及所占用消耗的资源有一定的关 联.部分为自己理解所写,不排除会有错漏,欢迎提供更好的意见 ...

  10. Hadoop RPC简单实例

    1.导入Hadoop-Common-2.6.0.jar导入工程,里面的IPC实现RPC需要的文件. 2.服务器端  (1)服务接口 package com.neu.rpc.server; /** * ...