jquery两级边动完整例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"/>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
 <script type="text/javascript">
 $(function(){

$("#s1").change(function(){
    //alert($(this).val());
    //getjson
     var json2=[{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":1,"name":"新蛋","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":false,"hosts":"hosts","id":2,"name":"易讯","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":3,"name":"卓越","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":4,"name":"淘宝电器城","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":5,"name":"苏宁易购","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":6,"name":"当当网","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":7,"name":"飞虎乐购","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":8,"name":"Wheelers","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":9,"name":"Booktopia","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":10,"name":"亚马逊美国","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":11,"name":"亚马逊英国","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":12,"name":"博库","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":13,"name":"BarnesNoble","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":14,"name":"国图","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"},{"createBy":"create_by","createTime":"2012-05-16T13:56:30","enabled":true,"hosts":"hosts","id":15,"name":"云城","updateBy":"update_by","updateTime":"2012-05-16T13:56:30","url":"url"}];
             var t='<option value="${id}">${name}</option>';
            //jQuery("#bestseller_id").html("");
            jQuery.template("t",t);
            jQuery("#s2").html("");
            jQuery.tmpl("t",json2).appendTo("#s2");
            jQuery("<option value='-1'>请选择</option>").insertBefore("#s2 option:first");
            jQuery("#s2").val("-1");

});

 alert("aa");
     var json1=[{"id":1,"bestseller_name":"\u5353\u8D8A\u70ED\u9500\u56FE\u4E66\u699C","opponent_id":3,"bestseller_url":"http://www.amazon.cn/gp/bestsellers/books/ref=pd_ts_zgc_b_books_morl?pf_rd_p=62753672&pf_rd_s=right-4&pf_rd_t=101&pf_rd_i=658390051&pf_rd_m=A1AJ19PSB66TGU&pf_rd_r=0CZ4CTZQSMYKFP5JJ9DR","interval_time":24,"create_time":"2012-06-29T12:00:31+0000","create_by":"maolingzhi","update_time":"2012-06-29T12:00:31+0000","update_by":"2012-06-29 20:00:31","enabled":1},{"id":2,"bestseller_name":"\u5353\u8D8A\u70ED\u9500\u97F3\u4E50\u699C","opponent_id":3,"bestseller_url":"http://www.amazon.cn/gp/bestsellers/music/754387051/ref=pd_ts_zgc_m_754387051_more?pf_rd_p=60042332&pf_rd_s=right-4&pf_rd_t=101&pf_rd_i=754386051&pf_rd_m=A1AJ19PSB66TGU&pf_rd_r=1AZ94TR1RHYM87G1HVCS","interval_time":24,"create_time":"2012-07-02T03:47:28+0000","create_by":"maolingzhi","update_time":"2012-07-02T03:47:28+0000","update_by":"2012-07-02 11:47:28","enabled":1}];



             var t='<option value="${id}">${bestseller_name}</option>';
            //jQuery("#bestseller_id").html("");
            jQuery.template("t",t);
            jQuery.tmpl("t",json1).appendTo("#s1");
 })
 </script>
 </head>

 <body>
<select id="s1"></select>
<select id="s2"  style="120px;"></select>

 </body>
</html>

原文地址:https://www.cnblogs.com/lexus/p/2582449.html