BootStrap 智能表单系列 十一 级联下拉的支持

像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种

1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推

2.也有将所有的项都加载到select中,然后通过关联来显示或隐藏与上一级别无关的项

感觉还是第二种简单一些,于是使用了第二种方式来实现的,其余的就不废话了

代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-cascade.html):

本地运行截图:

参数及使用请参照demo

上一章:BootStrap 智能表单系列 十 自动完成组件的支持

本系列首页:BootStrap 智能表单系列 首页

时间: 2024-10-03 23:16:07

BootStrap 智能表单系列 十一 级联下拉的支持的相关文章

BootStrap 智能表单系列 十 自动完成组件的支持

web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

BootStrap 智能表单系列 九 表单图片上传的支持

本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html): 依赖jquery-file-upload插件,需要引用jquery.ui.widget.js.jquery.iframe-transport.js.jquery.fileload.js 调用global.Fn.InitPlugin('img',

BootStrap 智能表单

背景:本码农.NET后端工程师,由于现在的公司后端能玩到的东西不怎么深入(一般也就sql.linq.反射.wcf....),所以申请玩玩前端的东西,在负责的一个电商项目中发现很大一部分是根据表结构来构建form表单的,而且模块还很多的,特别是表的列名都还没确定的时候需要先出界面,等后面表列名确定后又的重新来给表单元素加上id.name等,尼玛感觉这样下去就是一真正的码农了,于是自己整了一套根据配置来生成form表单的插件 源码地址(github):BootStrap智能表单 本系列将包括 1.表

bootstrap 智能表单 demo示例

1.基本配置,支持的元素类型 2.自动布局 3.自定义布局 4.自定义表单 5.数据绑定 6.带验证的表单

本示例演示如何通过Struts2框架提供的标签,简单地实现【级联下拉框】

1.发布房屋表单页面的级联下拉框如下: 2.     进入发布页面前需要查询下拉框数据,Action代码如下: 3.     房屋发布页面JSP代码如下: <s:doubleselect>标签的属性说明: list:                     一级下拉框的数据来源集合,和Action中集合名称一样 listKey:              一级下拉框数据集合中的实体,作为value的属性名 listValue:           一级下拉框数据集合中实体,作为text的属性名

Bootstrap之表单

基础表单 表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 当然表单除了这几个元素之外,还有input.select.textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

HTML5 智能表单

1.表单新增属性  ? autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点 注意:一个页面中最多只能有一个表单元素设置该属性,否则功能将失效,建议对第一个input元素设置autofocus属性. ? formaction 属性 <input type="submit" formaction="处理逻辑"><!-- 处理逻辑可为a