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

时间：2022-12-21 16:08:38
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>

效果图:

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

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

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

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

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

  2. jq select change下拉框选项变化判断选中值&comma;添加（attr&rpar;或移除&lpar;removeAttr&rpar;一个或多个属性

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

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

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

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

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

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

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

  6. Vue&period;js中使用select选择下拉框

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

  7. selenium select 选择下拉框

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

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

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

  9. Layui下拉框改变时触发事件

    layui.use(['form', 'layer'], function () { var form = layui.form(); var layer = layui.layer; form.on ...

随机推荐

  1. 玩转 Linux 系统的方法论

    Linus 说“Just for fun”,而我要说“Just for 折腾”.想知道我是怎样折腾 Linux 的,请看下面这个截图: 从这个截图可以看出,我为了“折腾” Linux 系统,在我的电脑 ...

  2. Datatables JQuery插件

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...

  3. 预定义变量 - PHP手册笔记

    预定义变量将所有的外部变量表示成内建环境变量,并且将错误信息表示成返回头.超全局变量是在全部作用域中始终可用的内置变量.在函数或方法中无需执行global $variable,就可以访问它们. $GO ...

  4. javascript打乱数组顺序-----1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【设计模式】建造者模式 Builder Pattern

    前面学习了简单工厂模式,工厂方法模式以及抽象工厂模式,这些都是创建类的对象所使用的一些常用的方法和套路, 那么如果我们创建一个很复杂的对象可上面的三种方法都不太适合,那么“专业的事交给专业人去做”,2 ...

  6. Python模块1

    序列化模块: 将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 序列化的目的 1.以某种存储形式使自定义对象持久化: 2.将对象从一个地方传递到另一个地方. 3.使程序更具维护性. jso ...

  7. 内置函数&lowbar;map、filter

     1.map   #循环帮你调用函数 map(makir,dir_names)     #生成器,结果是一个内存地址.为了节省内存,每次循环时,就按照定义的规则去生成一个数据,循环一次释放一次生成的数 ...

  8. beanshell获取响应结果数据

    http://blog.csdn.net/lluozh2015/article/details/72834014 [Jmeter]BeanShell断言--数据处理 标签: jmeter 2017-0 ...

  9. Android的路径信息&lbrack;转&rsqb;

    Delphi早就把IO相关的都提取到System.IoUtils单元中了. 路径操作就使用TPath的方法都很方便.usesSystem.IoUtilsTPath.GetTempPath//临时目录T ...

  10. iptables与SELinux

    iptables: 开始配置我们来配置一个filter表的防火墙.(1)查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L Chain INPUT (policy ...

相关文章