插件jquery.cityselect.js省市聯(lián)動(dòng)效果怎么使用

HTML

創(chuàng)新互聯(lián)成立與2013年，先為三穗等服務(wù)建站，三穗等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為三穗企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

首先在head中載入jquery庫(kù)和cityselect插件。

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript" src="js/jquery.cityselect.js"/script

接下來(lái)，我們?cè)?city中，放置三個(gè)select，并且三個(gè)select分別設(shè)置class屬性為：prov、city、dist，分別表示省、市、區(qū)（縣）三個(gè)下拉框。注意如果只想實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)，則去掉第三個(gè)dist的select即可。

div id="city"

select class="prov"/select

select class="city" disabled="disabled"/select

select class="dist" disabled="disabled"/select

/div

jQuery

調(diào)用cityselect插件非常簡(jiǎn)單，直接調(diào)用：

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

自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。

$("#city").citySelect({

url:"js/city.min.js",

prov:"湖南", //省份

city:"長(zhǎng)沙", //城市

dist:"岳麓區(qū)", //區(qū)縣

nodata:"none" //當(dāng)子集無(wú)數(shù)據(jù)時(shí)，隱藏select

});

當(dāng)然，你還可以擴(kuò)展，自定義下拉列表選項(xiàng)數(shù)據(jù)，你可以根據(jù)需要設(shè)置下拉內(nèi)容，注意數(shù)據(jù)格式一定要為JSON格式。

$("#city").citySelect({

url:{"citylist":[

{"p":"前端技術(shù)","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},

{"n":"JAVASCIPT"}]},

{"p":"編程語(yǔ)言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},

{"p":"數(shù)據(jù)庫(kù)","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},

]},

prov:"",

city:"",

dist:"",

nodata:"none"

});

你還可以利用PHP等后臺(tái)語(yǔ)言將數(shù)據(jù)庫(kù)中的數(shù)據(jù)轉(zhuǎn)換成JSON格式，然后使用url參數(shù)指向后臺(tái)地址也能實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)效果。

$("#city").citySelect({

url:"data.php"

});

jquery有哪些插件？

//200多個(gè)插件如下?實(shí)際開發(fā)中?請(qǐng)選擇合適的使用

1：文件上傳類jQuery插件

Ajax?File?Upload.

jQUploader.

Multiple?File?Upload?plugin.

jQuery?File?Style.

Styling?an?input?type?file.

Progress?Bar?Plugin.

2：表單驗(yàn)證類jQuery插件

jQuery?Validation.

Auto?Help.

Simple?jQuery?form?validation.

jQuery?XAV?–?form?validations.

jQuery?AlphaNumeric.

Masked?Input.

TypeWatch?Plugin.

Text?limiter?for?form?fields.

Ajax?Username?Check?with?jQuery.

3:表單選擇框類jQuery插件

jQuery?Combobox.

jQuery?controlled?dependent?(or?Cascadign)?Select?List.

Multiple?Selects.

Select?box?manipulation.

Select?Combo?Plugin.

jQuery?–?LinkedSelect

Auto-populate?multiple?select?boxes.

Choose?Plugin?(Select?Replacement).

4:表單基本、輸入框、選擇框等jQuery插件

jQuery?Form?Plugin.

jQuery-Form.

jLook?Nice?Forms.

jNice.

Ping?Plugin.

Toggle?Form?Text.

ToggleVal.

jQuery?Field?Plugin.

jQuery?Form’n?Field?plugin.

jQuery?Checkbox?manipulation.

jTagging.

jQuery?labelcheck.

Overlabel.

3?state?radio?buttons.

ShiftCheckbox?jQuery?Plugin.

Watermark?Input.

jQuery?Checkbox?(checkboxes?with?imags).

jQuery?SpinButton?Control.

jQuery?Ajax?Form?Builder.

jQuery?Focus?Fields.

jQuery?Time?Entry.

5:時(shí)間、日期和顏色選取類jQuery插件

jQuery?UI?Datepicker.

jQuery?date?picker?plugin.

jQuery?Time?Picker.

Time?Picker.

ClickPick.

TimePicker.

Farbtastic?jQuery?Color?Picker?Plugin.

Color?Picker?by?intelliance.fr.

6:投票類jQuery插件

jQuery?Star?Rating?Plugin.

jQuery?Star?Rater.

Content?rater?with?asp.net,?ajax?and?jQuery.

Half-Star?Rating?Plugin.

7:搜索類jQuery插件

jQuery?Suggest.

jQuery?Autocomplete.

jQuery?Autocomplete?Mod.

jQuery?Autocomplete?by?AjaxDaddy.

jQuery?Autocomplete?Plugin?with?HTML?formatting.

jQuery?Autocompleter.

AutoCompleter?(Tutorial?with?PHPMySQL).

quick?Search?jQuery?Plugin.

8:jQuery編輯器插件

jTagEditor.

WYMeditor.

jQuery?jFrame.

Jeditable?–?edit?in?place?plugin?for?jQuery.

jQuery?editable.

jQuery?Disable?Text?Select?Plugin.

Edit?in?Place?with?Ajax?using?jQuery.

jQuery?Plugin?–?Another?In-Place?Editor.

TableEditor.

tEditable?–?in?place?table?editing?for?jQuery.

9:多媒體、視頻、Flash等類jQuery插件

jMedia?–?accessible?multi-media?embedding.

JBEdit?–?Ajax?online?Video?Editor.

jQuery?MP3?Plugin.

jQuery?Media?Plugin.

jQuery?Flash?Plugin.

Embed?QuickTime.

SVG?Integration.

圖片類jQuery插件

ThickBox.

jQuery?lightBox?plugin.

jQuery?Image?Strip.

jQuery?slideViewer.

jQuery?jqGalScroll?2.0.

jQuery?–?jqGalViewII.

jQuery?–?jqGalViewIII.

jQuery?Photo?Slider.

jQuery?Thumbs?–?easily?create?thumbnails.

jQuery?jQIR?Image?Replacement.

jCarousel?Lite.

jQPanView.

jCarousel.

Interface?Imagebox.

Image?Gallery?using?jQuery,?Interface??Reflactions.

simple?jQuery?Gallery.

jQuery?Gallery?Module.

EO?Gallery.

jQuery?ScrollShow.

jQuery?Cycle?Plugin.

jQuery?Flickr.

jQuery?Lazy?Load?Images?Plugin.

Zoomi?–?Zoomable?Thumbnails.

jQuery?Crop?–?crop?any?image?on?the?fly.

Image?Reflection.

10:Google地圖類jQuery插件應(yīng)用

jQuery?Plugin?googlemaps.

jMaps?jQuery?Maps?Framework.

jQmaps.

jQuery??Google?Maps.

jQuery?Maps?Interface?forr?Google?and?Yahoo?maps.

jQuery?J?Maps?–?by?Tane?Piper.

11:游戲類jQuery插件

Tetris?with?jQuery.

jQuery?Chess.

Mad?Libs?Word?Game.

jQuery?Puzzle.

jQuery?Solar?System?(not?a?game?but?awesome?jQuery?Stuff).

12:表格,網(wǎng)格類jQuery插件

UI/Tablesorter.

jQuery?ingrid.

jQuery?Grid?Plugin.

Table?Filter?–?awesome!.

TableEditor.

jQuery?Tree?Tables.

Expandable?“Detail”?Table?Rows.

Sortable?Table?ColdFusion?Costum?Tag?with?jQuery?UI.

jQuery?Bubble.

TableSorter.

Scrollable?HTML?Table.

jQuery?column?Manager?Plugin.

jQuery?tableHover?Plugin.

jQuery?columnHover?Plugin.

jQuery?Grid.

TableSorter?plugin?for?jQuery.

tEditable?–?in?place?table?editing?for?jQuery.

jQuery?charToTable?Plugin.

jQuery?Grid?Column?Sizing.

jQuery?Grid?Row?Sizing.

13:統(tǒng)計(jì)類jQuery插件

jQuery?Wizard?Plugin?.

jQuery?Chart?Plugin.

Bar?Chart.

14:邊框、圓角、背景類jQuery插件

jQuery?Corner.

jQuery?Curvy?Corner.

Nifty?jQuery?Corner.

Transparent?Corners.

jQuery?Corner?Gallery.

Gradient?Plugin.

14:文字和超鏈接類jQuery插件

jQuery?Spoiler?plugin.

Text?Highlighting.

Disable?Text?Select?Plugin.

jQuery?Newsticker.

Auto?line-height?Plugin.

Textgrad?–?a?text?gradient?plugin.

LinkLook?–?a?link?thumbnail?preview.

pager?jQuery?Plugin.

shortKeys?jQuery?Plugin.

jQuery?Biggerlink.

jQuery?Ajax?Link?Checker.

15:文本提示類jQuery插件

jQuery?Plugin?–?Tooltip.

jTip?–?The?jQuery?Tool?Tip.

clueTip.

BetterTip.

Flash?Tooltips?using?jQuery.

ToolTip.

16:菜單和導(dǎo)航類jQuery插件

jQuery?Tabs?Plugin?–?awesome!?.?[demo?nested?tabs.]

another?jQuery?nested?Tab?Set?example?(based?on?jQuery?Tabs?Plugin).

jQuery?idTabs.

jdMenu?–?Hierarchical?Menu?Plugin?for?jQuery.

jQuery?SuckerFish?Style.

jQuery?Plugin?Treeview.

treeView?Basic.

FastFind?Menu.

Sliding?Menu.

Lava?Lamp?jQuery?Menu.

jQuery?iconDock.

jVariations?Control?Panel.

ContextMenu?plugin.

clickMenu.

CSS?Dock?Menu.

jQuery?Pop-up?Menu?Tutorial.

Sliding?Menu.

17:幻燈片、手風(fēng)琴特效類jQuery插件

jQuery?Plugin?Accordion.

jQuery?Accordion?Plugin?Horizontal?Way.

haccordion?–?a?simple?horizontal?accordion?plugin?for?jQuery.

Horizontal?Accordion?by?portalzine.de.

HoverAccordion.

Accordion?Example?from?fmarcia.info.

jQuery?Accordion?Example.

jQuery?Demo?–?Expandable?Sidebar?Menu.

Sliding?Panels?for?jQuery.

jQuery?ToggleElements.

Coda?Slider.

jCarousel.

Accesible?News?Slider?Plugin.

Showing?and?Hiding?code?Examples.

jQuery?Easing?Plugin.

jQuery?Portlets.

AutoScroll.

Innerfade.

18:拖放類jQuery插件

UI/Draggables.

EasyDrag?jQuery?Plugin.

jQuery?Portlets.

jqDnR?–?drag,?drop?resize.

Drag?Demos.

19:XML?XSL?JSON?Feeds相關(guān)jQuery插件

XSLT?Plugin.

jQuery?Ajax?call?and?result?XML?parsing.

xmlObjectifier?–?Converts?XML?DOM?to?JSON.

jQuery?XSL?Transform.

jQuery?Taconite?–?multiple?Dom?updates.

RSS/ATOM?Feed?Parser?Plugin.

jQuery?Google?Feed?Plugin.

20:瀏覽器

Wresize?–?IE?Resize?event?Fix?Plugin.

jQuery?ifixpng.

jQuery?pngFix.

Link?Scrubber?–?removes?the?dotted?line?onfocus?from?links.

jQuery?Perciformes?–?the?entire?suckerfish?familly?under?one?roof.

Background?Iframe.

QinIE?–?for?proper?display?of?Q?tags?in?IE.

jQuery?Accessibility?Plugin.

jQuery?MouseWheel?Plugin.

21:警告,?提示,?確認(rèn)等對(duì)話框

jQuery?Impromptu.

jQuery?Confirm?Plugin.

jqModal.

SimpleModal.

CSS

jQuery?Style?Switcher.

JSS?–?Javascript?StyleSheets.

jQuery?Rule?–?creation/manipulation?of?CSS?Rules.

jPrintArea.

22:DOM、AJAX和其它JQuery插件

FlyDOM.

jQuery?Dimenion?Plugin.

jQuery?Loggin.

Metadata?–?extract?metadata?from?classes,?attributes,?elements.

Super-tiny?Client-Side?Include?Javascript?jQuery?Plugin.

Undo?Made?Easy?with?Ajax.

JHeartbeat?–?periodically?poll?the?server.

Lazy?Load?Plugin.

Live?Query.

jQuery?Timers.

jQuery?Share?it?–?display?social?bookmarking?icons.

jQuery?serverCookieJar.

jQuery?autoSave.

jQuery?Puffer.

jQuery?iFrame?Plugin.

Cookie?Plugin?for?jQuery.

jQuery?Spy?–?awesome?plugin.

Effect?Delay?Trick.

jQuick?–?a?quick?tag?creator?for?jQuery..

什么是jquery插件?有什么用?

jquery 插件就是一些人用jquery寫的一些工具，常見的是jquery UI和jquery easyui,我們?cè)谡{(diào)用時(shí)只需要用很少的代碼就能實(shí)現(xiàn)很好的效果。

如easyui的datagrid、combobox、tree等可以實(shí)現(xiàn)表格、下拉框、樹等形狀及需要的操作。

附：easyui官網(wǎng)

可以在網(wǎng)站里面下載demo、觀看一些特效、下載插件js等。

jQuery插件開發(fā)全解析 jQuery插件的開發(fā)包括兩種：

一種是類級(jí)別的插件開發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery 的全局函數(shù)就是屬于jQuery命名空間的函數(shù)。

另一種是對(duì)象級(jí)別的插件開發(fā)，即給jQuery對(duì)象添加方法。

網(wǎng)頁(yè)題目：jquery級(jí)聯(lián)插件,jquery插件網(wǎng)
文章URL：http://chinadenli.net/article28/dsihecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、定制網(wǎng)站、品牌網(wǎng)站建設(shè)、小程序開發(fā)、python、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)