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. Struts2_ValueStack,OGNL详解（转）

    原文地址:http://blog.csdn.net/wyply115/article/details/8257140 一.OGNL表达式 1.ognl是struts2中使用的一种表达式语言,可用于js ...

  2. 完成对数据库的CRUD操作

    PS:查询相对复杂,要处理结果集,增删改则不用. package it.cast.jdbc; import java.sql.Connection; import java.sql.ResultSet ...

  3. can't resolve symbol 'R' ...

    in android studio IDE: 解决: Tools -> Android -> Sync Project with Gradle Files

  4. NotePad++左侧导航

    NotePad++ 1.  增加左侧导航 a. 通过工具栏里面的“插件”->Plugin Manager-> Shwo Plugin Manager b. 找到Explorer勾选,点击I ...

  5. Ant和Maven的作用是什么？两者之间功能、特点有哪些区别？

    Ant和Maven都是基于Java的构建(build)工具.理论上来说,有些类似于(Unix)C中的make ,但没有make的缺陷. Ant是软件构建工具,Maven的定位是软件项目管理和理解工具. ...

  6. 开发者所需要知道的 iOS 10 SDK 新特性

    转自:https://onevcat.com/2016/06/ios-10-sdk/ 写的很好啊.哈哈哈 总览 距离 iPhone 横空出世已经过去了 9 个年头,iOS 的版本号也跨入了两位数.在我 ...

  7. Linux定时任务Crontab详解

    原文地址:http://edu.codepub.com/2011/0104/28518.php      今天做了个数据库的备份脚本,顺便系统得学习一下Linux下定时执行脚本的设置.Linux下的定 ...

  8. 79. Word Search

    使用的别人的思路,用一个二维数组记录每一个位置是否用过,然后通过递归来判断每一个位置是否符合 public class Solution { public boolean exist(char[][] ...

  9. Java 静态变量，常量和方法

    static 关键字 例如:在球类中使用PI这个常量,可能除了本类需要这个常量之外,在另外一个圆类中也需要使用这个常量.这时没有必要 在两个类中同时创建PI这个常量,因为这样系统会将这两个不在同一个类 ...

  10. Js解析浏览器路径的方法

    方法如下:function parseURL(url) { var a = document.createElement('a'); //创建一个链接 a.href = url; return { s ...