<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <center>

            <!--文本框-->

            用户名:<input type="text" name="username" id="username" value="初始值" />

            <br />

            <br />

            <!--下拉列表-->

            部门:

            <select name="unit" id="unit" style="width: 200px;">

                <option value="0" selected>--请选择--</option>

                <option value="1">部门1</option>

                <option value="2">部门2</option>

            </select><br />

            <!--多选框-->

            爱好:

            <input type="checkbox" name="aihao" id="" value="0" checked="checked" />篮球

            <input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球

            <input type="checkbox" name="aihao" id="" value="2" />羽毛球

            <input type="checkbox" name="aihao" id="" value="3" />乒乓球

            <br />

            <!--单选框-->

            性别:

            <input type="radio" name="gender" id="" value="0" checked="checked" />男

            <input type="radio" name="gender" id="" value="1" />女

            <br />

            <br />

            <input type="button" id="" value="改变文本值" onclick="initText()" />

            <input type="button" id="" value="改变下拉列表值" onclick="changeSelect()" />

            <input type="button" id="" value="改变多选框值" onclick="changeCheckbox()" />

            <input type="button" id="" value="改变单选框值" onclick="changeRadio()" />

            <input type="button" id="" value="动态添加一个给下拉列表" onclick="addSelect()" />

            <script type="text/javascript">

                /*读取与改变文本框值*/

                function initText() {

                    alert($("#username").val());

                    $("#username").val("这是改变后的值");

                }

                /*读取与改变下拉列表值*/

                function changeSelect() {

                    alert("选的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text());

                    $("#unit").val("2");
　　　　　　　　　　　　//或者
　　　　　　　　　　　　$("#level option[value='"+value+"']").attr("selected","true");

                }

                function changeCheckbox() {

                    /*获取多选框的值*/

                    //                    $aihaos是一个数组

                    var $aihaos = $("[name='aihao'][checked]");

                    alert("多选框选中个数:" + $aihaos.length);

                    for(var i = 0; i < $aihaos.length; i++) {

                        var value = $($aihaos[i]).val();

                        alert(value);

                    }

                    /*设置为不选中状态*/

                    $($aihaos).attr("checked", false);

                    //设置其中一个为选中状态

                    $("[name='aihao'] :eq(2)").attr("checked", 'checked');

                }

                function changeRadio() {

                    /*获取单选框的值*/

                    //                    $aihaos是一个数组

                    var $aihaos = $("[type='radio'][checked]");

                    alert("多选框选中个数:" + $aihaos.length);

                    for(var i = 0; i < $aihaos.length; i++) {

                        var value = $($aihaos[i]).val();

                        alert(value);

                    }

                    //设改变单选框的值

                    $("[type='radio'] :eq(1)").attr("checked", 'checked');
　　　　　　　　　　　　$(":radio[value='线下']").prop("checked", true);

                }

                //动态给下拉列表增加选项

                function addSelect() {

                    var $unit = $("[name='unit']");

                    alert("多选框选中个数:" + $unit.length);

                    $unit.append("<option value='3'>部门3</option>");

                    $("<option value='4'>部门4</option>").appendTo($unit);

                }

            </script>

        </center>

    </body>

</html>

附加总结:

设置多选框联动(点一个，其他跟着变)

//	多选框联动

	$("#empCheckAll").click(function(){

		$("input[name='checkBox']").prop("checked",$(this).prop("checked"));

	})

　　

动态设置下拉列表的值:(有时候会不灵所以用下面这个)

$("[name='coursenature'] option[value='"+courseInfoBack.coursenature+"']").attr("selected","selected");

补充:建议还是用$("#selectId").val("222");的方式修改下拉列表的值。

例如:

<!DOCTYPE html>

<html>

    <body>

        <select id="test">

            <option value=""></option>

            <option value=""></option>

            <option value=""></option>

        </select></body>

</html>

<script>

$("#selectId").val("");</script>

更多具体的可以参考:http://www.cnblogs.com/qlqwjy/p/7511814.html

jQuery操作下拉列表以及单选多选框的更多相关文章

  1. [SAP ABAP开发技术总结]选择屏幕——按钮、单选复选框

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. 个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框

    插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...

  3. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  4. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  5. 关于我们的Jquery操作下拉列表和复选框，自定义下拉

    后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 < ...

  6. Jquery操作下拉列表和复选框，自定义下拉

    后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 < ...

  7. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

随机推荐

  1. python 学习心得

    多用类或是函数 我以前写的时候,不用函数,从头写到尾,后来,要改成函数,也是要花很多测试的时间,改的话还得一个调试,如果一开始就用函数的话,就能节省很多时间. 函数的功能尽可能的小 比如说像我用try ...

  2. Flask错误收集 【转】

    感谢大佬 ---> 原文链接 一.pydev debugger: process XXXXX is connecting 这个错误网上找了很多资料都无法解决,尝试过多种方法后,对我来说,下面这个 ...

  3. python QQ邮件发送邮件

    # -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMEText from email.header import ...

  4. ARabevaluator 颜色渐变控制类

    参考资料: http://blog.csdn.net/qq_33456552/article/details/52092865 实现渐变效果: ArgbEvaluator argbEvaluator; ...

  5. Django笔记 —— 模板

    最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...

  6. 【Support Vector Regression】林轩田机器学习技法

    上节课讲了Kernel的技巧如何应用到Logistic Regression中.核心是L2 regularized的error形式的linear model是可以应用Kernel技巧的. 这一节,继续 ...

  7. Python 3基础教程4-变量

    本文介绍变量,什么是变量呢,可以这样理解:变量是一个容器,这个容器可以用来存储值,而且可以被其他对象引用. 看看下面的demo.py # 这里介绍 变量 # 变量可以是数字var1 = 5print( ...

  8. python 学习分享-线程

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  9. Sprint 站立会议（个人）

    昨天做: 开Sprint会议确定并绘制Backlog. 今天做: 系统主窗体格局 编程环境搭建(部分) 遇到问题: 缺乏经验,没有好的总体规划. 团队博客园:http://www.cnblogs.co ...

  10. ajax是可以本地运行的

    ajax是可以本地运行的,经过验证,可以是可以,但跟浏览器有关,火狐和新IE可以,chrome不可以,旧ie不知道什么原因也不可以.但是浏览器也有它的安全策略,必须是同一目录下的文件可以访问.chro ...