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

2021-04-13 05:21:52 字數 1442 閱讀 4776

所謂n級級聯下拉列表,就是由多個選擇下拉列表組成的一組用來展示/選擇某種資訊的元件。

舉個例子:

我們想選擇中國的某個縣,那麼我們先會選擇省,這時被選中的「省」的所有地市就應該被列出來了;這時我們選擇乙個地市,那麼同樣此時被選中的地市的所有縣就會被列出來了。然後我們就可以選到我們需要的縣了。

其實這個元件有乙個更好的替代方法,那就是樹結構。我認為以樹的形式展示會更好寫。

先不管它有沒有存在的價值,反正我已經寫完了,是那種利用ajax寫的那種動態讀取接連資訊的。

好風以前還寫了一棵樹結構的選擇元件,但不是動態的讀取資料,是一次性的讀取。還不大完善,以後爭取完善吧(能夠做成動態讀取的就好了……)。

先說一下我的思路,

思路很簡單:

1 有資料就必須有查詢,那麼查詢語句存放在什麼地方?當然是伺服器端了,我用的是xml進行配置。

有查詢就必須有引數,引數我也是在配置檔案中配置的;

2 既然用到了ajax,那麼就不可能沒有指令碼,這個元件中的指令碼部分很簡單,根據改變的option的值以及所屬selector的序號向伺服器端傳送查詢請求,然後將查詢到的值填充到各個selector中去。

實現:實現起來沒什麼難的地方,就是麻煩些。

看一下配置檔案:

<

>

<

params

>

<

param

name

="param1"

/>

params

>

<

selector

serialnum

="0"

>

<

sql>

select m.value as value,m.name as label from mutitest m where m.fid='null'

and m.id=':::param1:'

sql>

selector

>

<

selector

serialnum

="1"

>

<

sql>

select m.value as value,m.name as label from mutitest m where m.fid='::0::'

sql>

selector

>

<

selector

serialnum

="2"

>

<

sql>

select m.value as value,m.name as label from mutitest m where m.fid='::1::'

sql>

selector

>

>

其實看過配置檔案後,我的開發思路基本上就很明了了。

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

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

JS AJAX 實現級聯下拉列表

實現在下拉框的級聯查詢,可以使得使用者不進行頁面跳轉便可以根據下拉框中所選的高階選項更改低階選項的內容。增進使用者體驗 以省市縣 區為例,在使用者選擇不同的省時,更新後面的市和對應的縣 區 在使用者選擇不同的市時,更新後面縣 區的內容。這裡我們僅演示如何實現下拉框的級聯查詢,所以省略了action屬...

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...