用jquery寫的json省市縣三級聯動下拉
阿新 • • 發佈:2019-02-01
<form action="#" name="myform"> <label>省</label><select name="provice" id="provice"><option value="-1">請輸入省份</option></select> <label>市</label><select name="city" id="city"><option value="-1">請輸入城市</option></select> <label>縣</label><select name="locale" id="locale"><option value="-1">請輸入區縣</option></select> </form>
2. 定義json資料來源:
var jsonData = [{ treeNode : '請輸入省份', value : -1, childNode : [{ treeNode : '請輸入城市', value : -1, childNode : [{ treeNode : '請輸入區縣', value : -1, childNode : [] }] }] },{ treeNode : '北京', value : 1, childNode : [{ treeNode : '東城區', value : 11, childNode : [] },{ treeNode : '西城區', value : 12, childNode : [] }] },{ treeNode : '廣西壯族自治區', value : 2601, childNode : [{ treeNode : '南寧', value : 6653, childNode : [{ treeNode : '橫縣', value : 10799, childNode : [] }, { treeNode : '賓陽縣', value : 10800, childNode : [] }] }] }]
3. javascript程式碼:
function initCountry(){ var provice = $("#provice"); var city = $("#city"); var locale = $("#locale"); var proviceStr = ""; $.each(jsonData,function(index,items){ proviceStr += "<option value='"+jsonData[index].value+"'>"+jsonData[index].treeNode+"</option>"; }); provice.empty().append(proviceStr); provice.bind("change",function(){ if($(this).find(":selected").attr("value") == -1){ city.empty().append("<option value='-1'>請輸入區縣</option>"); } }); provice.bind("change",function(){ var cityStr = ''; var index = provice.find(":selected").index(); $.each(jsonData[index].childNode,function(index,items){ city.empty(); cityStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>"; city.append(cityStr); }) changeLocale(); }); city.bind("change",changeLocale); function changeLocale(){ var localeStr = ''; var index = provice.find(":selected").index(); var index2 = city.find(":selected").index(); $.each(jsonData[index].childNode[index2].childNode,function(index,items){ locale.empty(); localeStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>"; locale.append(localeStr); }) if(localeStr == ''){ locale.empty(); locale.append("<option value='-11'>請輸入區縣</option>"); } } } $(function(){ initCountry(); })