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

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

时间: 2024-10-11 17:15:14

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

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

<body>     <form action="clock.html" method="post" onsubmit="return checkLength()">         <p>name:<input type="text" name="user" id="user"></p>         <input t

两种方法实现在HTML页面加载完毕后运行某个js

两种方法实现在HTML页面加载完毕后运行某个js 这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下 js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery

DataGridView编辑后立即更新到数据库的两种方法

DataGridView控件是微软预先写好的一个显示数据的控件,功能非常强大,可以显示来自数据库表的数据和XML等其他来源的数据.最近在做一个迷你超市管理系统,要大量用到这个控件.所以花时间好好研究了下. 这是迷你超市管理系的库存数据DataGridView,用户一定会想如果能直接在DGV中修改数据就好了. 是的,这是一个很好的想法,这个功能微软早就帮我们想到了,现在可以使两种方法加以实现.下面就来介绍一下他们. 第一张方法:基于DataAdapter对象创建一个CommandBulider,用

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

之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响应,从本质上来说这些都是观察者模式的具体实现,在web程序中的监听器也不例外.在Java Web程序中使用监听器可以通过以下两种方法:通过注解@WebListener来标识一个自定义的监听器:[java] view plain copy@WebListener public class Custom

登录用到了两种方法GET和POST方法 用reqeusts实现

这里需要补充的是,客户端不仅仅是一些简单的操作,它也是会处理一些运算,业务逻辑的处理等.也就是说,客户端也做着一些本该由服务器来做的一些事情 这个错误第一反应是是不是新的这个gateway节点有问题啊?但是想想这是不可能的,因为并不是所有请求都不可以,而且找了gateway部门的同事问了下,也不存在对请求单独处理的逻辑. 认证的同时要抓取页面表单的其他input标签的name和value.joomla的较为简单,网站一般不会明文传输用户名和密码,遇到这种情况需要分析引入的js文件,模拟加密算法.

获取母版页的相关内容有两种方法 --全了

获取母版页的相关内容有两种方法 1 通过findcontrol找控件ID需要在此事件中~因为Page_load中时是先内容页加载然后才是母版页加载    protected void Page_LoadComplete(object sender, EventArgs e)    {        Label2.Text = "现在时间是" + (Master.FindControl("Label1") as Label).Text;        if (Requ

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

参考LayUI官方文档,在子窗口中重载父级数据表格找到以下两种方法: 1.子窗口中重载:在子窗口中直接调用父级talbe的reload方法. $("body").on("click", "#Test", function () { //刷新父级数据表格 parent.layui.table.reload("demo"); //关闭弹层 var index = parent.layer.getFrameIndex(window.

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

用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中 js代码(搜索按钮的点击事件部分): $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 if($("#offerid").val() != ""){//判断id搜索框的值是

两种方法连接MySql数据库

1.用MySQLDriverCS连接MySQL数据库 先下载和安装MySQLDriverCS,在安装文件夹下面找到MySQLDriver.dll,然后将MySQLDriver.dll添加引用到项目中. using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Data.Odbc; using System.Drawing; using S