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的使用也是類似。當然,方法有很多種,下面這種方法是我個人比較經常使用的,需要的朋...