精华内容
下载资源
问答
  • 表单联动的总结

    2018-02-28 21:58:00
    表单联动的总结 在涉及到表单联动时,会联系到new Option这个新增option的方法,也有select的add方法,这是在单纯的练习HTML时候不了解的,下面来具体的了解一下吧。 动态的设置select 在JavaScript中动态的添加...

    表单联动的总结

    在涉及到表单联动时,会联系到new Option这个新增option的方法,也有select的add方法,这是在单纯的练习HTML时候不了解的,下面来具体的了解一下吧。

    动态的设置select

    在JavaScript中动态的添加select和option

    传统的方法,利用DOM创建新的节点,添加节点,可以得到,像下面一样

            //创建新的select
            var select=document.createElement('select')
            //创建一个新的option
            var option=document.createElement('option')
            option.text='first option'
            select.appendChild(option)
            document.body.appendChild(select)

    当我们知道select有add方法以及new Option方法创建新的option,我们很容易就可以得到,像下面一样

            var select=document.createElement('select')
            select.add(new Option('new way'))
            document.body.appendChild(select)

    new Option

    new Option有四个参数(text,value,defaultSelected,selected)

    text:字符串,指定option对象的text属性,也就是中间的文字部分

    value:字符串,指定option对象的value属性

    defaultSelected:布尔值,指定option对象的defaultSelected属性

    selected:布尔值,指定option对象的selected属性

    options:为select中的option集合

    selectedIndex:为select的中所选的option的索引,是索引值

    下面例子演示一下

            var obj=document.getElementById('mySelect')
            //移除所有的options
            function removeAll(){
                 obj.options.length=0
            }
            //删除一个option
            function removeOne(){
                obj.options.remove(obj.selectedIndex)
            }
            //获得option的value值
            function getOptionValue(){
                var index=obj.selectedIndex
                var optionValue=obj.options[index].value
            }
            //获得option的text值
            function getOptionText(){
                var index=obj.selectedIndex
                var optionText=obj.options[index].text
            }
            //修改option的值
            function reviseOption(){
                var index=obj.selectedIndex
                obj.options[index]=new Option('文本','value值')
            }
            //删除select
            function removeSelect(){
                obj.parentNode.removeChild(obj)
            }

     二级联动实战

              function elem(id){
                    return document.getElementById(id)
              }
              var container=elem('container')
              var radios=document.getElementsByTagName('input')
              var students=container.getElementsByClassName('students')
              var position=elem('position')
              var school=elem('school')
              //选项卡的切换          
                for(var i=0;i<radios.length;i++){
                         radios[i].index=i
                     radios[i].onclick=function(){
                           for(var j=0;j<students.length;j++){
                               students[j].style.display='none'
                           }
                           students[this.index].style.display='block'
                     }
                }
              //联动效果,多数组
              var colleges=[
                    ['天津大学','南开大学'],
                    ['上海大学','复旦大学'],
                    ['北京大学','清华大学','北京师范大学']
              ]
              //二级联动索引值
              function getColleges(){
                       var coll=colleges[position.selectedIndex] //selectedIndex为select选项的索引
                     for(var i=0;i<coll.length;i++){
                             school[i]=new Option(coll[i],coll[i],true,true) //new Option的方法创建新的option
                     }
              }
              //select的切换
              position.οnchange=function(){
                       getColleges()
              }

     

    转载于:https://www.cnblogs.com/iDouble/p/8485994.html

    展开全文
  • js实现表单联动

    千次阅读 2016-04-07 20:50:59
    最近做的一个小demo,原生js实现表单联动。演示地址:表单联动 我的github地址:源码地址,友情Star一下,谢谢实现效果如图: 这里我只记录一下核心代码思想。首先页面代码如下: 声明一个变量存放二级表单的...

    最近做的一个小demo,原生js实现表单联动。演示地址:表单联动
    我的github地址:源码地址,友情Star一下,谢谢

    实现效果如图:
    这里写图片描述
    这里我只记录一下核心代码思想。

    首先页面代码如下:
    这里写图片描述

    声明一个变量存放二级表单的内容
    这里写图片描述

    下面就是实现联动效果的核心代码
    这里写图片描述
    其中说下selectedIndex.属性可设置或返回下拉列表中被选选项的索引号。在这里,area是一级表单,如果选中该表单的某一个选择项,那么对应的就要是二级表单内容。最后通过遍历,依次把对应二级表单内容添加进页面。

    展开全文
  • ExtJs 实现表单联动

    2016-05-15 22:40:00
    遇到表单联动的业务。下面来说说主要实现思想: 说明:表单联动一般存在从属关系,有大范围的对象和大范围中的小对象。比如地理位置的选定(例:浙江省-杭州市-某某县)。在这里,我将大范围的对象称为包含对象,大...

    最近做的项目使用Extjs。遇到表单联动的业务。下面来说说主要实现思想:

    说明:表单联动一般存在从属关系,有大范围的对象和大范围中的小对象。比如地理位置的选定(例:浙江省-杭州市-某某县)。在这里,我将大范围的对象称为包含对象,大范围中的小对象称为被包含对象。

    表单联动针对ComboBox(组合框)。在实现时,将包含对象传入被包含对象中,在后台查询被包含对象时,使用传入的包含对象的某个值(一般为被包含对象的外键)作为condition,查询与其相关的被包含对象。实现指定的被包含对象查询。

    还有一点注意的是:在将大范围对象传入小对象后,使用js的监听机制,监听当小对象(组合框)要expand(展开)时,加载与其大范围对象相关的所有小对象。这里通过一个大范围对象的某个参数作为查询小对象的条件。两个对象一般存在外键关联的关系。

    实例化表单的代码

    var chejianObject = new ChejianBox("所属车间","chejianId"); //实例化车间
    var banzuObject = new BanzuBox("班组","emp.banzuId",chejianObject); //实例化班组
    banzuObject.on('expand', function(comboBox){
        var chejianId = Ext.getCmp("chejianValue所属车间").getValue();
        this.getStore().load({
            params: {
            chejianId: chejianId
        }
        });
    });

    定义表单的代码

    //班组定义
    BanzuBox = Ext.extend(Ext.form.ComboBox,{
        constructor: function(labelName,hiddenName, chejianObject){
            //与部门表进行级联操作
        chejianObject.on('select', function(comboBox){
            var value = comboBox.getValue();
            Ext.getCmp('banzuValue'+labelName).setRawValue('');
            banzuStore.reload({
                    params: {chejianId: value}
            });
        });
        BanzuBox.superclass.constructor.call(this,{
            id: 'banzuValue'+labelName,
            fieldLabel: labelName,
            displayField: 'banzuName',
            valueField: 'banzuId',
            hiddenName: hiddenName,
            width: 100,
            emptyText: '请选择',
            height: 100,
            store: banzuStore,
            triggerAction: 'all', //显示所有
            editable: false,
            allowBlank: false,
            msgTarget: 'side',
            blankText: '请选择'
        });
        }
    });
    //车间定义
    ChejianBox = Ext.extend(Ext.form.ComboBox,{
        chejianStore: null,
        //注意传入参数labelName,因为其作id的一部分,避免出现相同的id
        constructor: function(labelName, hiddenName){
            chejianStore = new Ext.data.JsonStore({
            autoLoad: true, //设为自动加载,以便实现修改时选中某值
            url:'chejian_show.action',
            fields: ['chejianId','chejianName']
            });
        ChejianBox.superclass.constructor.call(this,{
            id: 'chejianValue'+labelName,
            fieldLabel: labelName,
            displayField: 'chejianName',
            valueField: 'chejianId',
            emptyText: '请选择',
            hiddenName: hiddenName,
            width: 100,
            store: chejianStore,
            triggerAction: 'all', //显示所有
            editable: false,
            allowBlank: false,
            msgTarget: 'side',
            blankText: '请选择'
        });
        }
    });
    展开全文
  • 什么是子表单联动? 子表单联动是通过已某一普通字段为条件,联动出另一表单符合条件的子表单数据。 我们发现很多时间,因为子表单不支持联动,我们要拿子表单的数据的时候,要通过聚合表中转来取子表单的数据,这样...

    我们发现很多时间,因为子表单不支持联动,我们要拿子表单的数据的时候,要通过聚合表中转来取子表单的数据,而子表单外层数据可以联动后就便捷很多!

    什么是子表单联动?
    子表单联动是通过已某一普通字段为条件,联动出另一表单符合条件的子表单数据。

    我们发现很多时间,因为子表单不支持联动,我们要拿子表单的数据的时候,要通过聚合表中转来取子表单的数据,这样麻烦很多。但如果,子表单外层数据可以联动后就便捷很多!

    如下图:在百数当前表单【进货单号】与进货信息表单的【进货单号】一致,获取这一单号的进货明细信息。
    在这里插入图片描述
    子表单联动演示设置
    1.创建【进货信息】表单,并添加一个【单行文本】字段,标题为:进货单号。
    在这里插入图片描述

    2.创建一个【子表单】,标题为“进货明细”。
    在这里插入图片描述

    3.【子表单】控件属性“字段”添加2个【单行文本】字段,标题为:商品名称、商品规格,添加2个【数字】字段,标题为:单价、数量。
    在这里插入图片描述
    4.创建【入库信息】表单,并添加一个【单行文本】字段,标题为:进货单号。
    在这里插入图片描述

    5.创建一个【子表单】,标题为“入库明细”。
    在这里插入图片描述

    6.【子表单】控件属性“字段”添加2个【单行文本】字段,标题为:商品名称、商品规格,添加2个【数字】字段,标题为:单价、数量。
    在这里插入图片描述

    7.子表单联动,关联表单为【进货信息】,数据联动【进货信息】里面的“商品名称”、“商品规格”、“单价”、“数量”。
    在这里插入图片描述

    子表单联动效果展示
    在这里插入图片描述

    注意 当子表单有外层数据联动,和子表单里面的控件有数据联动,当他们会同时触发时,只会触发子表单外层的数据联动【子表单联动称为外层数据联动;控件联动参考百数帮助文档】

    更多百数相关介绍:https://www.baishuyun.com/private_cloud.html

    展开全文
  • 用JSF的valueChangeListener也是可以实现表单联动的,当下拉框中选择一个值后,会往后台backbean中传入刚才所选中的ID,这个ID可以做为另外一个下拉框内容的查询条件,具体如下: JSP页面 下拉框1: <h:...
  • • 问题3:我这个做法是表单联动的常见做法吗 源码: ``` <!DOCTYPE html> <title>task3-3 * { font-size: 12px; padding: 0; margin: 0; } form {width: 400px; height: 200px;...
  • echarts饼图与表单联动

    千次阅读 2018-01-04 18:05:15
    最近在学习echarts,做了一个饼图和表单数据联动的案例。当鼠标移入饼图的时候,表单对应的区域会变色,离开变回原样。并且表单增加、删除或修改数据之后饼状图对应变化。先放效果图~无操作的样子鼠标移入的样子当...
  • 配置文件web.xmlStrSelectCityServletservlet.SelectCityServletSelectCityServlet/SelectCityServletJSP文件:SelectZEHJIANGJIANGSUCITYfunction getResult(stateVal) {//alert("1~begin");var url...
  • 效果如下: 默认选择是计算机学院软件工程,当把第一个下拉框选项改为通信与信息工程学院时 ,后边的下拉框选项变化,比如第一项变成了通信工程 实现过程: select部分:用v-for加载选项列表,选择的选项改变时...
  • 在ElementUi中我们建立一个表单,然后给表单绑定了属性data,然后依次从data对象中取值和表单中的各控件进行绑定;然后当表单中的A下拉框的值变更后,我需要手动触发去变更B和C两个控件,结果发现现象,每次赋值后,B...
  • 使用邻接矩阵实现商品SKU表单联动

    千次阅读 热门讨论 2020-01-13 08:53:36
    什么是邻接矩阵 不了解邻接矩阵,请查看邻接矩阵 邻接矩阵是一个用来描绘顶点与边关系的数据结构。...他们主要应用在迷宫、简单地图、级联表单等等图形化场景 先看看我们要实现效果 交互分析 当用户选...
  • infopath表单联动

    2013-03-26 20:32:57
    请问在infopath表单里面,要做联动,就是根据资助小类的变动而带出内容显示到下面资助标准和倍数的红色框里面,这样可以做到吗?我现在做到的就是在infopath的预览里面能显示正常带出来内容,但是发布后在网页上建...
  • 如示例图中所示,在页面中完成两个单选框,切换单选框的不同选项时下方显示的表单随之切换。 当选择在校生时,出现两个select下拉菜单,一个选择城市,一个选择学校,当选择非在校生时,出一个文本输入框 学校下拉...
  • 这是个多层的表单,prop有点特别,当然这不是重点,需要实现两个两个input内的数据格式统一,都为数字或都为百分数,效果如下: 组件代码: <el-col :span="5"> <el-form-item label="实际值" v-if=...
  • 自定义表单列表编辑内容联动地区显示为数字解决方法打开 \dede\templets\diy_edit_content.htm 找到 $formfields = ''; foreach($fieldlist as $field=>$fielddata) { $allowhtml = array('htmltext'); if($row[$...
  • 背景:遇到一种情况:数值A,数值B,数值C, 他们的关系是数值B要小于数值A,数值C的结果为数值A和数值B的和 page.vue <a-form-model ​​​​​​​ ref="FormData" layout="inline" :labelCol="{ span: 8 }" ...
  • 【知识积累】jQuery MiniUI实现表单联动

    千次阅读 热门讨论 2016-06-11 15:52:25
    需求介绍: 点击第一个datagrid里面的节点名称,在页面上的第二个datagrid里面显示出它对应的相关信息。用jQuery MiniUI实现表单联动效果: 关键代码: (1)第一个datagrid实现: 节点名称 计划类型
  • 任务:点击radio单选框选定,动态联动刷新select中的可选items。前台js:functiongetRooms(){ varlocation=GetRadioValue('location'); $.ajax({ type:"POST", url:"${ctx}/oa/mee...
  • antd form表单select、input联动发现页面value值还是显示的上一次的 举个栗子,根据员工职位联动员工姓名和工号 //根据职位查询员工名字 wokerChange(value) { const self = this api.post(APIS....
  • $.each用法及表单联动

    2018-06-26 10:46:32
    表单联动 HTML < select id = "choseBase" > < option > 请选择 option > select > < select id = "choseSource" > < option > 请选择 option > select > < select id = "option...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,453
精华内容 4,181
关键字:

表单联动