select change下拉框改变事件 设置选定项，禁用select

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

     <title>Select Change()</title>

     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

     <style type="text/css">

         .align-center

         {

             margin: 0 auto; /* 居中 这个是必须的，，其它的属性非必须 */

             width: 700px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

         }

         p

         {

             width: 700px;

             margin: 10px 0 0 0;

             padding: 10px;

             border: 0;

             border: 1px dotted Orange;

             background: #f5f5f5;

             min-height: 25px;

         }

         .Show

         {

             background: #FFA07A;

         }

         .hand

         {

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div class="align-center">

         <p>

             1.change 在select元素值改变时触发。

             <br />

             2.disabled 设置下拉框为禁用模式

             <br />

             3.setValue 选择radio 改变 select选中项

         </p>

         <p>

             Change

             <select name="selectTest">

                 <option value="1">First</option>

                 <option value="2">Second</option>

                 <option value="3" selected="selected">Third</option>

                 <option value="4">Fourth</option>

             </select>

             disabled select

             <input name="cbDisabled" type="checkbox" />

         </p>

         <p>

             setValue

             <br />

             First<input type="radio" name="rdoValue" value="1" class="hand" />

             Second<input type="radio" name="rdoValue" value="2" class="hand" />

             Third<input type="radio" name="rdoValue" value="3" class="hand" />

             Fourth<input type="radio" name="rdoValue" value="4" class="hand" />

         </p>

         <p>

             showValue:

             <input type="text" name="inputValue" />

         </p>

         <p class="Show">

             用来显示隐藏地..

         </p>

     </div>

 </body>

 </html>

 <script type="text/javascript">

     $(function () {

         $("select[name='selectTest']").change(function () {

             var selectValue = $(this).children('option:selected').val(); //这就是selected的值

             SetCommon(selectValue)

         });

         $("input[name='cbDisabled']").bind("click", function () {

             if ($(this).attr("checked") == "checked") {

                 $("select[name='selectTest']").attr("disabled", true)

             } else {

                 $("select[name='selectTest']").attr("disabled", false)

             }

         });

         $("input[name='rdoValue']").click(function () {

             $("select[name='selectTest'").val($(this).val()); //设置selected 值

             SetCommon($(this).val())

         });

     })

     function SetCommon(selectValue) {

         $("input[name='inputValue']").val(selectValue);

         if (selectValue == 1 || selectValue == 2) {

             $(".Show").toggle(false);

         } else {

             $(".Show").toggle(true);

         }

     }

 </script>

效果图:

附件下载：http://files.cnblogs.com/Orange-C/SelectDemo.zip

select change下拉框改变事件 设置选定项，禁用select的更多相关文章

  1. 下拉框改变事件：获取下拉框中当前选择的文本 SelectionChanged事件

    /// <summary> /// 下拉框改变事件:获取下拉框中当前选择的文本 /// </summary> /// <param name="sender&q ...

  2. jq select change下拉框选项变化判断选中值,添加（attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

  3. jquery select change下拉框选项变化判断选中值

    <th class="formTitle"> 是否转出: </th> <td class="formValue" colspan= ...

  4. jQ给下拉框绑定事件，为什么要绑定在框(select标签)上，而不是绑定在选项(option标签)上

    这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...

  5. jquery动态生成的select下拉框，怎么设置默认的选中项？

    这两天都被这问题困扰,可能是我不太懂前端.我做layui表格行编辑,点击编辑按钮弹出layer,里边有一个民族的下拉框不能直接显示后台传过来的值.我把民族数组用jquery添加到了select里边,可 ...

  6. PHP文本框的值随下拉框改变

    初学PHP,下面是实现文本框内容随下拉框变化的代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  7. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  8. selenium select 选择下拉框

    实战百度首页设置,浏览偏好设置. 打开首页,在非登录的情况下,查看分析页面元素,我们可以看到,我们首先要点击的是设置, 接着点击,搜索设置, 然后select选择下拉框. select_by_inde ...

  9. 【selenium】基于python语言，如何用select选择下拉框

    在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...

随机推荐

  1. 随机数是骗人的，.Net、Java、C为我作证(转)

    几乎所有编程语言中都提供了"生成一个随机数"的方法,也就是调用这个方法会生成一个数,我们事先也不知道它生成什么数.比如在.Net中编写下面的代码: Random rand = ne ...

  2. DoModal时带出次级窗口闪现

    最近在做MFC 界面开发. 在一个CDialog窗口DoModal模态显示时, 会将次级窗口带出闪现(比如将一个窗口active, 然后点击我现在程序需要弹框的按钮,弹出弹出正常,但原来active的 ...

  3. 【emWin】例程五：显示数值

    实验指导书及代码包下载: 链接:http://pan.baidu.com/s/1pLexsAf密码:p0jf 实验现象:

  4. Sprint会议记录（第五组）

    会议时间:12/8 下午14:00 会议地点:宿舍 会议进程: *首先我们讨论了实验第一个Sprint1要实现的功能:排球规则分析.比赛详细过程.比赛人物分析, *之后对是任务的认领, *最后每个人对 ...

  5. Python强化训练笔记(七)——使用deque队列以及将对象保存为文件

    collections模块中的deque对象是一个队列,它有着正常队列的先进先出原则.我们可以利用这个对象来实现数据的保存功能. 例如,现有一个猜数字大小的游戏,系统开始会随机roll点一个0-100 ...

  6. centos6修改nameserver

    1.直接修改/etc/resolv.conf,重启网卡 #service network restart 后发现并没有修改掉 2.直接修改ifcfg-eth0文件 /etc/sysconfig/net ...

  7. SQL JOIN\SQL INNER JOIN 关键字\SQL LEFT JOIN 关键字\SQL RIGHT JOIN 关键字\SQL FULL JOIN 关键字

    SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. Join 和 Key 有时为了得到完整的结果,我们需要从两个或更多的表中获取结果.我们就需要执行 join. 数据库中的表 ...

  8. FireDAC 连接SQL Server一些要注意的地方

    TFDConnection: FetchOptions.Mode 设置为fmAll, 返回全部结果, 否则默认只返回前50条, 效果与open以后再执行FetchAll一样 Specifies how ...

  9. How to inspect who is caller of func and who is the class of instance

    1. Who is the class of self instance ? class aa(object): def a(self): if self.__class__.__name__ == ...

  10. 自动化服务安装部署工具-Ansible

    自动化运维工具Ansible详细部署 ================================================================================= ...