表单联动的总结

Posted 2020-10-25 idouble

表单联动的总结

在涉及到表单联动时，会联系到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.onchange=function(){
                   getColleges()
          }