关于下拉框的onchange事件和onclick选择value值。
下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器。
下面是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择</title>
<script src="js/lib/jquery/v1.12.3/jquery-1.12.3.js"></script>
<style>
#one {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 20px;
}
#two {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 61px;
}
#three {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 102px;
}
</style>
<script>
function showlist(optvalue){
if(optvalue=="1"){
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else if(optvalue=="2"){
$( "#select2" ).show();
$( "#select1" ).hide();
$( "#select3" ).hide();
}
else{
$( "#select3" ).show();
$( "#select1" ).hide();
$( "#select2" ).hide();
}
}
</script>
</head>
<body>
<div id="one">
<select name="" id="select1" onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<div id="two">
<select name="" id="select2"
style="display: none"
onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<div id="three">
<select name="" id="select3"
style="display: none"
onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<script>
$( document ).ready( function()
{
//这是onclick事件可能有些不兼容,不推荐使用
/*var sel = $( "select" );
var option = sel.children();
console.log( option );
for( var i = 0; i < option.length; i++ )
{
option[ i ].onclick = function()
{
alert( this.value );
if( this.value ==1 )
{
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else
if( this.value ==2 )
{
$( "#select2" ).show();
$( "#select1" ).hide();
$( "#select3" ).hide();
}
else
{
$( "#select3" ).show();
$( "#select1" ).hide();
$( "#select2" ).hide();
}
}
}*/
} );
</script>
</body>
</html>
关于下拉框的onchange事件和onclick选择value值。的更多相关文章
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- 商品类型的下拉框绑定一个事件,通过ajax获取属性
html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...
- Html下拉框的定义以及JS、Jquary取值、添加和移除
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test" name=" ...
- 下拉框的change事件
6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...
- 点击select下拉框,触发事件
<div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...
- 给datagridview的下拉框添加valueChange事件
修改datagridview的EditMode属性为EdutOnEnter,否则需要点2次以上才出现下拉框 1.给DataGridView添加EditingControlShowing事件: 2.编辑 ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
- 谈谈如何给下拉框option添加点击事件?
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
随机推荐
- oracle 查看并行sql语句的并行数量和如何开并行
1.执行sql:select /*+ parallel(a,4) */ * from tf_f_user a where rownum<100000; 2.如何查看该sql语句的并行数量: se ...
- 测开之路一百五十四:ajax+json前后台数据交互
在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...
- Jmeter之非GUI模式(命令行)执行
在使用Jmeter进行性能测试时,建议使用非GUI模式执行. 命令行启动 1.进入jmeter安装的bin目录 2.执行Jmeter命令 如下: (1.jmeter.bat -n -t E:\apac ...
- Elasticsearch 安装head插件
一.简介 elasticsearch-head是一个界面化的集群操作和管理工具,可以对集群进行傻瓜式操作.你可以通过插件把它集成到es(首选方式),也可以安装成一个独立webapp. Elastics ...
- oracle-不完全数据库恢复-被动恢复-RMAN-06025/ORA-01190
不完全数据库恢复 到目前为止,前面讨论的都是完全恢复数据库,这是recover database\recover tablespace\recover datafile默认的行为特征. 所谓完全恢复指 ...
- react-native start error Invalid regular expression:
详细错误: error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\]. ...
- Spoj375 Qtree--树链剖分
Spoj375 Qtree给一棵共有 n(n · 10000) 个结点的树, 每条边都有一个权值, 要求维护一个数据结构, 支持如下操作: 1. 修改某条边的权值; 2. 询问某两个结点之间的唯一通路 ...
- spark MLlib矩阵四则运算,线性代数
1.导包请看我的上一篇博文,maven项目的包 https://www.cnblogs.com/wuzaipei/p/10965680.html 2.denseMatirx 矩阵四则运算如下 版本不同 ...
- 【QT开发】QT在windows下的exe应用程序如何在别人的电脑上直接运行
当你利用QT编译了一个可执行程序,需要将这个可执行程序拷贝到别人的电脑上运行,这个时候除了这个可执行程序外,还需要支持的库才可用运行.一般来说通过下面的方法可以实现. 首先,需要看你用的是什 ...
- 深入分析微博密码加密and百万级数据采集分享(登录篇)
一.前言 此文章主要是对微博微博关键词的检索结果进行采集,但是微博的采集需要登陆,所以此程序分为登陆程序和爬虫程序两部分: 微博要实现规模性数据采集自然少不了大量账号,这就需购买大量账号以及批量登陆, ...