JS AJAX 實現級聯下拉列表

2021-10-06 06:23:19 字數 3475 閱讀 2826

實現在下拉框的級聯查詢,可以使得使用者不進行頁面跳轉便可以根據下拉框中所選的高階選項更改低階選項的內容。增進使用者體驗

以省市縣/區為例,在使用者選擇不同的省時,更新後面的市和對應的縣/區;在使用者選擇不同的市時,更新後面縣/區的內容。

這裡我們僅演示如何實現下拉框的級聯查詢,所以省略了action屬性的內容,並使用onsubmit屬性顯示所選項。

<

!--頁面載入時自動更新省份-->

"getprovince()"

>

"show"

>

<

!--提交表單時顯示所選省市縣-->

效果圖:

很吃藕,簡單修飾一番:

好的,現在可以看了

把頁面捏完,現在完成級聯查詢的指令碼,三個函式,分別是省市縣/區的更新。還要有乙個顯示最終選項的函式。

傳遞資料採用「-」做分隔符,如:北京市-上海市-天津市
顯示
function

show()

更新省份
function

getprovince()

//追加新的節點

for(

var i =

0;i < province.length;i++

)//更新城市下拉框

getcity()

;}}}

更新城市
function

getcity()

//新增新的城市

for(

var i =

0;i < city.length;i++

)//更新縣/區下拉框

getarea()

;}}}

更新縣區
function

getarea()

for(

var i =

0;i < area.length;i++)}

}}

存放省市縣/區的資料庫表單:

配合前端的三個查詢,後端設定三個servlet:province,city,area分別查詢省份,城市,地區.

另外,這個後端設涉及jdbc的使用,本文僅使用而沒有給出對應的實現。

tips:

獲取省份

);/*返回答案*/

printwriter out = response.

getwriter()

; out.

print

(result.

tostring()

);out.

close()

;}獲取城市

protected

);/*返回結果*/

printwriter out = response.

getwriter()

; out.

print

(result.

tostring()

);out.

close()

;}

獲取區縣
protected

);/*返回結果*/

可以看到城市和區縣已經修改

創作不易,點個關注再走好不好,要不,贊也行qaq

yii實現級聯下拉列表

在模版中 echo form dropdownlist model,src type id ordersrc options array id task order src id echo form dropdownlist model,src shop id array 全部 array id t...

級聯下拉列表

下拉列表,同步 charset utf 8 title type text j ascript var provinces 安徽 江蘇 浙江 山東 var cities 合肥 蕪湖 蚌埠 安慶 南京 蘇州 無錫 徐州 杭州 寧波 溫州 金華 濟南 青島 煙台 日照 var provselnode v...

N級級聯下拉列表 的實現思路

所謂n級級聯下拉列表,就是由多個選擇下拉列表組成的一組用來展示 選擇某種資訊的元件。舉個例子 我們想選擇中國的某個縣,那麼我們先會選擇省,這時被選中的 省 的所有地市就應該被列出來了 這時我們選擇乙個地市,那麼同樣此時被選中的地市的所有縣就會被列出來了。然後我們就可以選到我們需要的縣了。其實這個元件...