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. C#解析HTML

    第一种方法:用System.Net.WebClient下载Web Page存到本地文件或者String中,用正则表达式来分析.这个方法可以用在Web Crawler等需要分析很多Web Page的应用 ...

  2. Unity学习疑问记录之查找

    unity中提供了获取对象的五种方法: 通过对象名称(Find方法) 通过标签获取单个游戏对象(FindWithTag方法) 通过标签获取多个游戏对象(FindGameObjectsWithTags方 ...

  3. 阿里云服务器Linux CentOS安装配置（二）yum安装svn

    阿里云服务器Linux CentOS安装配置(二)yum安装svn 1.secureCRT连接服务器 2.先创建一个文件夹,用来按自己的习惯来,用来存放数据 mkdir /data 3.yum安装sv ...

  4. Activiti-explorer 在tomcat中部署报HTTP Status 404问题

    如果tomcat版本没错,请检查一下文件,将Activiti中war文件夹中的内容复制到webapp下,而不是将文件夹整个放进去……

  5. sublime 添加代码片段(snippets)

    1.工具-新代码片段(Tools -> New Snippet) 2. <snippet> <content><![CDATA[ if(\$rs && ...

  6. 更新与升级 FreeBSD

    https://www.freebsd.org/doc/zh_CN/books/handbook/updating-upgrading-freebsdupdate.html 安全补丁存储在远程的机器上 ...

  7. Error of "Please Check for Sufficient Write File Permissions"

    The error message “Please check for sufficient write file permissions” is generated by the Web-based ...

  8. C# 接口笔记

    /* 1. 实现多态的两种方式.             *    使用虚方法实现多态.             *    使用抽象方法实现多态.             *              ...

  9. ionic实现点击popup区域外部分来关闭popup

    var htmlEl = angular.element(document.querySelector('html')); htmlEl.on('click', function (event) { ...

  10. Java语言程序设计(基础篇)第一章

    第一章 计算机.程序和Java概述 1.1 引言 什么是程序设计呢? 程序设计就是创建(或者开发)软件,软件也称为程序. 1.2 什么是计算机 计算机是存储和处理数据的电子设备,计算机包括硬件(har ...