<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>Document</title>

        <style type="text/css">

            .option_show {

                display: none;

            }

            .discount {

                width: 70px;

            }

        </style>

    </head>

    <body>

        <select class="select" name="oyhfd">

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

            <option class="option" value="1">足球</option>

            <option class="option" value="2">篮球</option>

            <option class="option" value="3">乒乓球</option>

            <option class="option" value="4">网球</option>

        </select>

        <span style="display:none;" class="option_show">

    <input type="text" class="discount" id="" name="" placeholder="其他球类"/>

  </span>

    </body>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>

        $(".select").on("change", function() {

            if($("option:selected", this).val() == 4) {

                $(".option_show").show();

            } else {

                $(".discount").val("");

                $(".option_show").hide();

            }

        });

    </script>

</html>

select的option触发事件的更多相关文章

  1. javaScript 的option触发事件

    先说jquery的option触发事件,很方便 $("option:selected")//这样就能直接触发选择的option了 在JavaScript中就显得比较麻烦,其实< ...

  2. option触发事件两种方法总结

    代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <tit ...

  3. option触发及获取当前选中的option值

    #标签 #<select id="city" class="select"> #JavaScript #$("#city").c ...

  4. 实现 select中指定option选中触发事件

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  5. select选择option时触发的click事件google不兼容问题

    原先的方式,下面代码编写的问题在google浏览器下是触发不了click事件的,具体缘由不清楚,反正都可以概括为不兼容了 碰到问题时,百度到的一篇解决:http://blog.163.com/rihu ...

  6. select中option的onclick事件失效

    html: <select id="pageSelect"> <option value="1" selected onclick=" ...

  7. select列表遍历和触发事件

    1.以下两种都是jquery获取select列表被选中的value.var strText=$("#select_id").find("option:selected&q ...

  8. 通过jquery触发select自身的change事件

    ###通过jquery触发select自身的change事件 1.通过js来去触发select的change事件 代码如下:包含了html部分和js部分 //html部分 <select cla ...

  9. 关于select下拉框选择触发事件

    最开始使用onclick设置下拉框触发事件发现会有一些问题: <select> <option value="0" onclick="func0()&q ...

随机推荐

  1. Spring MVC自定义消息转换器(可解决Long类型数据传入前端精度丢失的问题)

    1.前言 对于Long 类型的数据,如果我们在Controller层通过@ResponseBody将返回数据自动转换成json时,不做任何处理,而直接传给前端的话,在Long长度大于17位时会出现精度 ...

  2. asp.net--owin的知识点

    一篇很好的介绍owin的文章 http://kb.cnblogs.com/page/509236/ Owin在webconfig中定义启动配置类IdentityConfig的方法(代码来自极客学院的教 ...

  3. Maven使用package打包Spring Boot时出现：Unable to find a single main class from the following candidates的问题解决

    问题如下: [ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.3.5.RELEASE ...

  4. jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释

    近期在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用. 我这里就列了一下api的使用说明,以后大家看博客就能解决这个问题.如有不对的地方,请留言指出! jQuery Mo ...

  5. Oracle创建自增字段方法-ORACLE SEQUENCE的简介

    曾经最头疼的就是对表插入数据的时候,有主键问题. 由于主键不可以反复,所以得用函数自己定义一个规则生成不反复的值赋值给主键. 如今发现oracle有sequence就不用那么麻烦了. 转自:http: ...

  6. 实战c++中的vector系列--vector应用之STL的find、find_if、find_end、find_first_of、find_if_not(C++11)

    使用vector容器,即避免不了进行查找,所以今天就罗列一些stl的find算法应用于vector中. find() Returns an iterator to the first element ...

  7. Object对象具体解释（二）之clone

    clone方法会返回该实例对象的一个副本,通常情况下x.clone() != x || x.clone().getClass() == x.getClass() || x.clone().equals ...

  8. 站点搭建从零開始（七） WordPress站点的完好

    1.WordPress站点前后端经常使用语言简单介绍和执行过程 通常一个站点的整个构建过程中须要大量的技术支持,尤其是用到非常多种计算机语言.站点的构建主要分后端和前端两部分,后端代码在server上 ...

  9. Object类方法简介二

    在学了Object类前面的三个常用方法后,又遇到它的另外三个方法——clone().finalize().getClass(),这三个方法不经常使用,但因为在学习过程遇到了,就简单的对它们的使用做一个 ...

  10. Android之——ContentProvider操作XML

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47682559 不多说,不废话,直接上代码,大家一看都懂得 /** * Conten ...