<!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>
评论