zoukankan      html  css  js  c++  java
  • option触发事件两种方法总结

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>option触发事件</title>
    <script src="jquery-1.7.2.min.js"></script>
    </head>
    <body>
    <select name="" id="selected">
    <option value="1001">option1</option>
    <option value="1002">option2</option>
    <option value="1003">option3</option>
    <option value="1004">option4</option>
    <option value="1005">option5</option>
    </select>
    <div id="test">
    <dd class="sheng">您所在省:</dd>
    <dd><input type="text" class="input1" placeholder="浙江省"></dd>
    </div>
    </body>
    <script>
    $(document).ready(function(){
    /*
     * 方法一    
    $("#selected").on("change",function(){
    if ($("option:selected",this).index() ==0) {
    $(".sheng").html("您所在省:");
    $(".input1").attr("placeholder","请输入您所在省");
    };
    if ($("option:selected",this).index() ==1) {
    $(".sheng").html("您所在市:");
    $(".input1").attr("placeholder","请输入您所在市");
    };
    if ($("option:selected",this).index() ==2) {
    $(".sheng").html("您的爱好:");
    $(".input1").attr("placeholder","请输入您的爱好");
    };
    if ($("option:selected",this).index() ==3) {
    $(".sheng").html("您的性别:");
    $(".input1").attr("placeholder","请输入您的性别");
    };
    if ($("option:selected",this).index() ==4) {
    $(".sheng").html("您最喜欢的水果:");
    $(".input1").attr("placeholder","请输入您最喜欢的水果");
    };
    });
    */ /*方法二*/ $("#selected").on("change",function(){ if ($("option:selected",this).val() == '1001') { $(".sheng").html("您最喜欢的水果:"); $(".input1").attr("placeholder",'请输入您最喜欢的水果'); } else if ($("option:selected",this).val() == '1002') { $(".sheng").html("您的性别:"); $(".input1").attr("placeholder",'请输入您的性别'); } else if ($("option:selected",this).val() == '1003') { $(".sheng").html("您的爱好:"); $(".input1").attr("placeholder",'请输入您的爱好'); } else if ($("option:selected",this).val() == '1004') { $(".sheng").html("您所在市:"); $(".input1").attr("placeholder",'请输入您所在市'); } else{ $(".sheng").html("您所在省:"); $(".input1").attr("placeholder",'请输入您所在省'); } }); }); </script> </html>

    总结:

    1、要使用jquery库,务必要引用 jquery-1.7.2.min.js 文件

    2、option 触发 click事件,首先要给 select 加 onchange 事件,因为option 不能直接触发click事件

    3、if 判断option选项值时,务必要 使用 $("option:selected",this),后面用索引值index()或val()根据自己的喜好吧

    作为前端菜鸟,还是要多敲代码,加油!多自己主动思考,没有思路多百度,如果还是解决不了的话,就请教比自己厉害的,善于总结,希望可以帮到需要的人。

  • 相关阅读:
    [vue/cli4] 目录public和asset区别
    VSCode常用指令
    [vue] JS导出Excel
    各设计模式总结与对比及Spring编程思想
    JavaIO演进之路
    用300行代码手写提炼Spring的核心原理
    设计模式(六)之装饰器模式(Decorator Pattern)深入浅出
    设计模式(五)之适配器模式(Adapter Pattern)深入浅出
    设计模式(四)之模板模式(Template Method Pattern)深入浅出
    设计模式(二)之委派模式(Delegate Pattern)深入浅出
  • 原文地址:https://www.cnblogs.com/hongxp/p/5866329.html
Copyright © 2011-2022 走看看