select城市3級聯動

2022-08-20 00:06:11 字數 961 閱讀 7085

html

首先在head中載入jquery庫和cityselect外掛程式。

接下來,我們在#city中,放置三個select,並且三個select分別設定class屬性為:prov、city、dist,分別表示省、市、區(縣)三個下拉框。注意如果只想實現省市二級聯動,則去掉第三個dist的select即可。

id="city"> 

class="prov">

class="city" disabled="disabled">

class="dist" disabled="disabled">

jquery

呼叫cityselect外掛程式非常簡單,直接呼叫:

$("#city").cityselect();  

自定義引數呼叫,設定預設省市區。

$("#city").cityselect();  

當然,你還可以擴充套件,自定義下拉列表選項資料,你可以根據需要設定下拉內容,注意資料格式一定要為json格式。

$("#city").cityselect(,,]}, 

]}, 

,,,]}, 

,,]}, 

]}, 

prov:"", 

city:"", 

dist:"", 

nodata:"none" 

}); 

你還可以利用php等後台語言將資料庫中的資料轉換成json格式,然後使用url引數指向後台位址也能實現無重新整理聯動效果。

$("#city").cityselect();

vue二級聯動select

div span 所在區域 span select name v model country option value item v for item,index in area option select select name v model cityname option value item...

jquery實現select二級聯動

jquery實現乙個簡單的select二級聯動選單,如下 1 doctype html 2 html 3 head 4 meta charset utf 8 5 title jquery 二級聯動 title 6 style 7.city 10.city first 13style 14 scrip...

Jsp之select二級聯動

select聯動在實際專案中是再熟悉不過了,經常要使用到,每次都要去整理,梳理,會花費一些不必要的時間。然而select標籤的使用,在不同的開發中也不一樣,比如在vue中跟jsp中,今天主要是梳理在jsp中的應用,vue的使用也是類似。當然,方法有很多種,下面這種方法是我個人比較經常使用的,需要的朋...