注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

php asp 高端网站开发 微信网站开发 视频会议软硬件

 
 
 

日志

 
 

原创:jquery 动态select option  

2014-03-15 02:34:00|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

jquery 动态select option - 加菲 - 加菲的梦
 
代码如下:
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>jquery select test</title>
<meta charset="UTF-8">
<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<script src="jquery-1.8.3.min.js"></script>
<style>
.t{padding:2px 5px 2px 5px;border: 1px solid #E6E2E1;background-color:#C3C3C3;}
.v{padding:2px 5px 2px 5px;border: 1px solid #E6E2E1;background-color:#C3C3C3;}

</style>
</header>

<body>

<select name="a1" id="a1">
<option value="1">山西</option>
<option value="2">山东</option>
</select>
<span id="msg1"></span>

<select name="a2" id="a2">
</select>
<span id="msg2"></span>
<select name="a3" id="a3">
</select>

<span id="msg3"></span>
<input type="button" name="btn" id="btn" value="添加选项到第一个列表">

<input type="button" name="btn2" id="btn2" value="显示选中项的text">
<input type="button" name="btn3" id="btn3" value="显示选中项的value">

<br><hr>
<span>选中项的TEXT:</span>
<span id="t1" class="t" >-</span>
<span id="t2" class="t" >-</span>
<span id="t3" class="t" >-</span>

<br><hr>
<span>选中项的值:</span>
<span id="v1" class="v" >-</span>
<span id="v2" class="v" >-</span>
<span id="v3" class="v" >-</span>

</body>
</html>

<script>
$(document).ready(function(){
//点击登陆,post提交
$('#btn').click(function(){
$("#a1").find("option").remove();
$("<option value='1'>请选择省</option>").appendTo("#a1");
$("<option value='1'>请选择市</option>").appendTo("#a2");
$("<option value='1'>请选择县</option>").appendTo("#a3");

var i=0;
var str="";
for (i=0;i<100 ;i++ )
{
str += "<option value='"+ i +"'>选项"+ i +"</option>";
}
$(str).appendTo("#a1");

});
$('#a1').change(function(){
//alert($(this).children('option:selected').val());  //弹出select的值
$("#msg1").html($(this).children('option:selected').val());

var i2=0;
var str2="";
for (i2=0;i2<100 ;i2++ )
{
str2 += "<option value='"+ i2 +"'>选项"+ i2 +"</option>";
}
$(str2).appendTo("#a2");

});

$('#a2').change(function(){
//alert($(this).children('option:selected').val());  //弹出select的值
$("#msg2").html($(this).children('option:selected').val());

var i3=0;
var str3="";
for (i3=0;i3<100 ;i3++ )
{
str3 += "<option value='"+ i3 +"'>选项"+ i3 +"</option>";
}
$(str3).appendTo("#a3");

});

//
$('#btn2').click(function(){
$("#t1").html($("#a1").find("option:selected").text());
$("#t2").html($("#a2").find("option:selected").text());
$("#t3").html($("#a3").find("option:selected").text());
});

$('#btn3').click(function(){
$("#v1").html($("#a1").find("option:selected").val());
$("#v2").html($("#a2").find("option:selected").val());
$("#v3").html($("#a3").find("option:selected").val());
});

});
</script>
  评论这张
 
阅读(508)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017