jQuery是一個非常常用的JavaScript庫,它可以為我們提供很多方便的操作方法。其中之一就是用它來選擇省市區,下面我們來看一下如何使用jQuery實現這個功能。
//選擇省份 $("#province").change(function(){ var provinceVal = $(this).val(); $("#city").html('<option value="">請選擇市</option>'); if(provinceVal=="北京市"||provinceVal=="上海市"||provinceVal=="天津市"||provinceVal=="重慶市"){ $("#county").html('<option value="">請選擇區/縣</option>'); }else{ $("#county").html('<option value="">請選擇縣/區</option>'); } $.each(city, function(key, val) { if(key == provinceVal){ $.each(val, function(key, val) { var html = "<option value='"+val+"'>"+val+"</option>"; $("#city").append(html); }); } }); }); //選擇市 $("#city").change(function(){ var cityVal = $("#city").val(); $("#county").html('<option value="">請選擇縣/區</option>'); $.each(county, function(key, val){ if(key == cityVal){ $.each(val, function(key, val){ var html = "<option value='"+val+"'>"+val+"</option>"; $("#county").append(html); }); } }); });
上述代碼中,我們定義了兩個下拉框,id分別為province、city和county,其中province是省份的下拉框,city是市的下拉框,county是區/縣的下拉框。我們通過監聽province和city的change事件來實現下拉框動態改變的功能。
其中city和county的值是事先定義好的一個JavaScript數組:
var city = { "北京市": ["北京市"], "上海市": ["上海市"], "江蘇省": ["南京市", "蘇州市", "無錫市"], "浙江省": ["杭州市", "溫州市", "寧波市"], "福建省": ["福州市", "廈門市", "泉州市"], //省份和市的數據 }; var county = { "南京市": ["秦淮區", "玄武區", "建鄴區"], "蘇州市": ["姑蘇區", "相城區", "吳中區"], "無錫市": ["惠山區", "錫山區", "濱湖區"], "杭州市": ["上城區", "下城區", "江干區"], "溫州市": ["鹿城區", "龍灣區", "甌海區"], "寧波市": ["江北區", "北侖區", "鎮海區"], //市和縣/區的數據 };
上述代碼可以根據具體需求更改,例如增加刪除省、市、區等。這個功能主要用于選擇省市區地址,應用于各種電商、物流等類別中,更加方便地實現選擇地址功能。