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()根据自己的喜好吧
作为前端菜鸟,还是要多敲代码,加油!多自己主动思考,没有思路多百度,如果还是解决不了的话,就请教比自己厉害的,善于总结,希望可以帮到需要的人。
option触发事件两种方法总结的更多相关文章
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- js阻止表单提交的两种方法
下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 在Java Web程序中使用监听器可以通过以下两种方法
之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...
- jquery/js/a标签实现当前页面跳转的两种方法
在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...
- 用easyui实现查询条件的后端传递并自动刷新表格的两种方法
用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...
- LayUI使用弹窗重载父级数据表格的两种方法
参考LayUI官方文档,在子窗口中重载父级数据表格找到以下两种方法: 1.子窗口中重载:在子窗口中直接调用父级talbe的reload方法. $("body").on(" ...
- Redis中持久化的两种方法详解
Redis提供了两种不同的持久化方法来将数据存储到硬盘里面.一种方法叫快照(snapshotting),它可以将存在于某一时刻的所有数据都写入硬盘里;另一种方法教只追加文件(append-only f ...
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- Intent传递对象的两种方法(Serializable,Parcelable) (转)
今天讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是Bundle.putParcela ...
随机推荐
- [bzoj1195] [hnoi2006] 最短母串
本题是一个经典的状压dp问题,在紫书中有着加强版的例题. 本题的难度主要体现在:如何输出字符串字典序最小. 为了解决这个问题,我们有两种常用方案: 1) 我们可以采用bfs输出路径的方法,使用+1来输 ...
- tp框架
<?php namespace Admin\Controller; use Think\Controller; class DengluController extends Controller ...
- IOS 实现TXT文本自动识别编码的方法
from :http://kyoworkios.blog.51cto.com/878347/1344013 TXT识别编码是个复杂的问题.幸好有c/c++的一个库能识别. 库的叫uchardet,可以 ...
- 理解Action,Service和Dao功能(转)
真正理解.区分Action,Service和Dao功能 在不分层的系统里,我们可以将所有的代码都写到一个地方,比如struts的Action类.在这里,我们不仅要处理页面逻辑,还要做业务逻辑,还要 ...
- 医院his系统数据库恢复
医院IT系统的重要性堪比金融行业,“银行系统宕机,老百姓不能取钱:医院HIS系统宕机,老百姓不能看病”, 医院信息系统称得上是迄今为止企业级信息系统中最复杂的一类. 某医院HIS系统SQL2008数 ...
- linux Cron 执行Django 任务计划
用shell 脚本调用python 脚本如下 #!/bin/bash export FLAVOR=liveexport PYTHONPATH=$PYTHONPATH:/home/alex/Django ...
- 导航栏项目滑过时子菜单显示/隐藏jquery代码
;(function(window){ $('.menuitem').hover(function(){ $('>a',this).css('background-color ...
- easelJS入门、事件、spritesheet
easelJS入门.事件.spritesheet <%@ page language="java" contentType="text/html; charset= ...
- V8编程入门
本文档介绍了V8引擎的一些关键概念,并提供了例子hello world指引你入门. Hello World 让我们看一个Hello World的示例,它将一个字符串参数作为JavaScript语句,执 ...
- doubango介绍
1.doubango官网:http://www.doubango.org/ 2.doubango是一个开源的VOIP基础平台, 并能用于嵌入式和桌面系统的开源框架,该框架使用ANSCI-C编写,具有很 ...