jquery书写一个简易的二级联动
生活随笔
收集整理的這篇文章主要介紹了
jquery书写一个简易的二级联动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先用php生成一個json數組示例如下
JSON_UNESCAPED_UNICODE 是對漢字進行處理的參數
然后HTML代碼如下 把那個json_city賦值成我們用php生成的json即可
<!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title></title><script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> </head> <body><div><table><tr><td>省份城市</td><td><select name="province" id="province"><option value="">請選擇省份</option></select><select name="city" id="city"><option value="">請選擇城市</option></select></td></tr></table></div><script type="text/javascript">$(function(){//頁面加載完畢后開始執行的事件var city_json='{"江蘇":["南京","常州"],"河南":["南陽","安陽"]}';var city_obj=eval('('+city_json+')');for (var key in city_obj){$("#province").append("<option value='"+key+"'>"+key+"</option>");}$("#province").change(function(){var now_province=$(this).val();$("#city").html('<option value="">請選擇城市</option>');for(var k in city_obj[now_province]){var now_city=city_obj[now_province][k];$("#city").append('<option value="'+now_city+'">'+now_city+'</option>');}});});</script> </body> </html>?效果如下
?
轉載于:https://www.cnblogs.com/lizhaoyao/p/6632229.html
總結
以上是生活随笔為你收集整理的jquery书写一个简易的二级联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 3.27 下午
- 下一篇： Spring 依赖注入(二、注入参数)