表单联动的总结
在涉及到表单联动时，会联系到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() }
