有时候我们展示给用户的表单中的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. iOS 9适配技巧

    中文快速导航: 1.iOS9网络适配_ATS:改用更安全的HTTPS(见Demo1) i. WHAT(什么是SSL/TLS?跟HTTP和HTTPS有什么关系) ii. WHY(以前的HTTP不是也能用 ...

  2. [转载]做一个 App 前需要考虑的几件事

    本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ========================================= ...

  3. DZ的伪静态神马的终于OK了

    十分感谢开发“凤凰图集”的onexin团队!帮忙搞定了伪静态!这玩意儿折腾了俺好多功夫,人家瞬间就搞定.

  4. JENKINS里,如何为SLAVE配置多个不同的JAVA环境?

    今天遇到这个问题了, 原来在MASTER配置里可以统一管理的,不管这个路径有没有在MASTER上. 这样一来,JENKINS在编译时,会优先选用环境变量里的JAVA版本,然后才是MAVEN里的JAVA ...

  5. windows笔记-一个简单的windows GUI应用程序

    #include<windows.h> // 编写Windows程序必须包含的头文件 LRESULT CALLBACK WndProc(HWND,UINT,WPARAM,LPARAM); ...

  6. Android 获取图片资源的4种方式

    1. 图片放在sdcard中 Bitmap imageBitmap = BitmapFactory.decodeFile(path) (path 是图片的路径,跟目录是/sdcard) 2. 图片在项 ...

  7. 17.1 Replication Configuration 复制配置

    17.1 Replication Configuration 复制配置 17.1.1 How to Set Up Replication 17.1.2 Replication Formats 17.1 ...

  8. DELL笔记本拆机添加内存条

    在笔记本后面拧开7个螺丝 然后打开后盖 掰开卡口,内存条会弹出,此时按住内存条两侧的缺口往外用力就可以拔出内存条. 装入内存条时,先插入内存条,按下即可.

  9. Android-webView的loadUrl

    1 //打开本包内asset目次下的test.html文件 wView.loadUrl(" file:///android_asset/test.html "); 2 //打开本地 ...

  10. JS日期时间格式化

    Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + ...