代码如下：

<!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()根据自己的喜好吧

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

option触发事件两种方法总结的更多相关文章

  1. 在Activity中响应ListView内部按钮的点击事件的两种方法！！！

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  2. js阻止表单提交的两种方法

    下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 在Java Web程序中使用监听器可以通过以下两种方法

    之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...

  4. jquery/js/a标签实现当前页面跳转的两种方法

    在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...

  5. 用easyui实现查询条件的后端传递并自动刷新表格的两种方法

    用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...

  6. LayUI使用弹窗重载父级数据表格的两种方法

    参考LayUI官方文档,在子窗口中重载父级数据表格找到以下两种方法: 1.子窗口中重载:在子窗口中直接调用父级talbe的reload方法. $("body").on(" ...

  7. Redis中持久化的两种方法详解

    Redis提供了两种不同的持久化方法来将数据存储到硬盘里面.一种方法叫快照(snapshotting),它可以将存在于某一时刻的所有数据都写入硬盘里;另一种方法教只追加文件(append-only f ...

  8. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  9. Intent传递对象的两种方法(Serializable,Parcelable) （转）

    今天讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是Bundle.putParcela ...

随机推荐

  1. onchange、oninput、onpropertyChange事件的异同

    onchange事件适用于input\textarea\select元素上,支持各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效: oninput事件适用于inpu ...

  2. vmware克隆Centos6.7虚拟机网卡无法启动问题

    快速处理办法: cat /etc/sysconfig/network-scripts/ifcfg-eth0 sed -i '/UUID/d' /etc/sysconfig/network-script ...

  3. Qt编译Oracle OCI驱动

    最近使用qt开发了一个访问数据库的工具, 默认使用ODBC驱动注入的方式,后来发现Oracle中ODBC驱动注入经常失败. 后来就想直接使用OCI方式访问,而默认情况下Qt只有Sqlite和ODBC驱 ...

  4. [无关IT]就这样在凌晨写一篇吧~

    由于新浪博客广告实在太嚣张,自己也都是转载,故决定搬家至此,一改只转不写的习惯T^T,争取记录一下自己的小成长~日后有时间把脑子里的小东西一点点写出来~(好可怕的说)... 好了,睡了!各位爷早睡~ ...

  5. iOS开发 missing iOS distribution signing identity for 。。。

    苹果真是不让人省心,新年一来上传APP,就出现Missing iOS Distribution signing indetity for xxx 于是就把证书删了做,做了删了再重做,还是不行 百度了一 ...

  6. Jsp属性范围

    IDE:MyEclipse 2014(自带Tomcat 7) Web项目路径: Web项目配置信息: WebRoot --WEB-INF --web.xml <?xml version=&quo ...

  7. MySQL临时表与派生表(简略版)

    MySQL临时表与派生表 当主查询中包含派生表,或者当select 语句中包含union字句,或者当select语句中包含一个字段的order by 子句(对另一个字段的group by 子句)时,M ...

  8. 【转】20条Linux命令面试问答

    问:1 如何查看当前的Linux服务器的运行级别? 答: ‘who -r’ 和 ‘runlevel’ 命令可以用来查看当前的Linux服务器的运行级别. 问:2 如何查看Linux的默认网关? 答: ...

  9. javap -s 查看java方法签名

    工程先用eclipse生成class目录,转到class目录下执行: javap -s com.example.hellojni.MainActivity Compiled from "Ma ...

  10. C语言－指针、数组、结构体、分支、循环混合使用

    1.写一个程序,输出如下内容: //############################################################# //### name number ma ...