BootStrap智能表單實(shí)戰(zhàn)系列(十一)級聯(lián)下拉的支持
什么是 Bootstrap?
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。
Bootstrap 包的內(nèi)容
基本結(jié)構(gòu):Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細(xì)講解。
CSS:Bootstrap 自帶以下特性:全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class,以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細(xì)講解。
組件:Bootstrap 包含了十幾個(gè)可重用的組件,用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。
JavaScript 插件:Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件。您可以直接包含所有的插件,也可以逐個(gè)包含這些插件。這將在 Bootstrap 插件 部分詳細(xì)講解。
定制:您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
在項(xiàng)目中我們經(jīng)??梢砸姷较袷∈锌h選擇,其實(shí)實(shí)現(xiàn)方法有很多種,下面小編給大家介紹bootstrap 智能表單之bootstrap級聯(lián)下拉的支持,具體介紹如下所示:
1.有在第一級選擇的時(shí)候去加載或者從本地對象中拿第一級對應(yīng)的數(shù)據(jù)源顯示到列表中,第二級以此類推
2.也有將所有的項(xiàng)都加載到select中,然后通過關(guān)聯(lián)來顯示或隱藏與上一級別無關(guān)的項(xiàng)
感覺還是第二種簡單一些,于是使用了第二種方式來實(shí)現(xiàn)的,其余的就不廢話了
代碼如下(頁面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-cascade.html):
本地運(yùn)行截圖:

以上所述是小編給大家介紹的BootStrap智能表單實(shí)戰(zhàn)系列(十一)級聯(lián)下拉的支持的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 妙用Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 基于Bootstrap實(shí)現(xiàn)Material Design風(fēng)格表單插件 附源碼下載
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 詳解Bootstrap創(chuàng)建表單的三種格式(一)
- BootStrap中的表單大全
相關(guān)文章
JavaScript使用AutoDecimal解決運(yùn)算精度問題
這篇文章主要介紹了?JavaScript?運(yùn)算中的精度問題及解決方案?AutoDecimal,指出?JavaScript?處理浮點(diǎn)數(shù)運(yùn)算常出現(xiàn)精度問題,現(xiàn)有解決方案存在不足,為了解決這一問題,AutoDecimal?應(yīng)運(yùn)而生,本文給大家介紹了JavaScript使用AutoDecimal解決運(yùn)算精度問題2024-12-12
iis6+javascript Add an Extension File
iis6+javascript Add an Extension File...2007-06-06
js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果
這篇文章主要介紹了js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
JavaScript中Number對象的toFixed() 方法詳解
下面小編就為大家?guī)硪黄狫avaScript中Number對象的toFixed() 方法詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
JavaScript類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的方法實(shí)例分析
這篇文章主要介紹了JavaScript類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的方法,結(jié)合實(shí)例形式分析了javascript類數(shù)組對象的功能,以及類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的相關(guān)方法與實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
學(xué)習(xí)javascript的閉包,原型,和匿名函數(shù)之旅
Javascript中有幾個(gè)非常重要的語言特性——對象、原型繼承、閉包。其中閉包 對于那些使用傳統(tǒng)靜態(tài)語言C/C++的程序員來說是一個(gè)新的語言特性,本文給大家介紹js的閉包,原型,和匿名函數(shù)之旅,感興趣的朋友一起學(xué)習(xí)吧2015-10-10

