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

面包会有的

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

 
 
 

日志

 
 

原创:jquery select json data.php  

2014-03-15 05:55:08|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
jquery select json data.php - 加菲 - 加菲的梦
 
<!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>

<br><hr>
<span id="jsondata">--------</span>



<br><hr>
<select name="m1" id="m1">
</select>
<input type="button" name="btn4" id="btn4" value="从data.php获取json">
<input type="button" name="btnm1" id="btnm1" value="从data.php获取json并加到select">
<input type="button" name="btnm2" id="btnm2" value="显示选中项的text">
<input type="button" name="btnm3" id="btnm3" value="显示选中项的value">

<br><hr>
<span>选中项的TEXT:</span>
<span id="mt1" class="t" >-</span>
<span id="mt2" class="t" >-</span>
<span id="mt3" class="t" >-</span>

<br><hr>
<span>选中项的值:</span>
<span id="mv1" class="v" >-</span>
<span id="mv2" class="v" >-</span>
<span id="mv3" class="v" >-</span>







</body>
</html>

<script>
$(document).ready(function(){
//点击登陆,post提交
$('#btn').click(function(){
$("#a1").find("option").remove();
$("#a2").find("option").remove();
$("#a3").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());
});


$("#btn4").live("click",function(){
pObj=new Object();
pObj.level=2;
//pObj.cache="&cache="+new Date().getTime();
//pObj.pid1=$(this).attr('testvalue');
//pObj.cache="&cache="+new Date().getTime();

$.get("/test/jselectjson/data.php?"+$.param(pObj),function(data,status){
var d = eval('(' + data + ')');
var index=0;
$(d).each(function(index){ 
var val = d[index]; 
//alert(val);//弹出:[object Object]
alert("id=" + val.id + ",name="+val.name);
});

$("#jsondata").html(data);
});
});

$("#btnm1").live("click",function(){
pObj=new Object();
pObj.level=2;
//pObj.cache="&cache="+new Date().getTime();
//pObj.pid1=$(this).attr('testvalue');
//pObj.cache="&cache="+new Date().getTime();

$.get("/test/jselectjson/data.php?"+$.param(pObj),function(data,status){
var d = eval('(' + data + ')');
var index=0;
var strm="";
$(d).each(function(index){ 
var val = d[index]; 
//alert(val);//弹出:[object Object]
//alert("id=" + val.id + ",name="+val.name);
strm = "<option value='"+ val.id +"'>"+ val.id + "-" + val.name +"</option>";
$(strm).appendTo("#m1");
});

//$("#jsondata").html(data);
});
});
$('#btnm2').click(function(){
$("#mt1").html($("#m1").find("option:selected").text());
});

$('#btnm3').click(function(){
$("#mv1").html($("#m1").find("option:selected").val());
});

});
</script>

data.php
<?
$outstr="[{id:'101',name:'计算机专业'},{id:'102',name:'软件专业'},{id:'104',name:'通信专业'}]";
//$outstr="ddd";
echo $outstr;
?>

  评论这张
 
阅读(510)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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