JavaScript动态创建select下拉菜单
分类:实例代码
JavaScript动态创建select下拉菜单属于前端实例代码,有关更多实例代码大家可以查看。
下面就分部介绍一下如何动态的创建操作一个select下拉菜单:
一.创建一个select:
function createSelect(){ mySelect=document.createElement("select"); mySelect.id="mySelect"; document.body.mydiv.appendChild(mySelect); }
以上代码可以创建一个select对象,并且将此select的id设置为"mySelect"。
二.为select添加option项:
function addOption(){ var obj=document.getElementById('mySelect'); obj.add(new Option("显示的内容一","值"));//只有IE浏览器支持 obj.options.add(new Option("显示的内容二","值"));//兼容所有浏览器 }
函数Option(text,value,defaultselected,selected)函数具有四个参数:
1.text参数:规定option项目显示的文本。
2.value参数:规定option项目的值。
3.defaultselected参数:布尔值用来规定当前项是否是默认选中项。
4.selected参数:布尔值用来规定当前项是否被选中。
三.删除所有的option:
function removeAll(){ var obj=document.getElementById('mySelect'); obj.options.length=0; }
将select对象的option项的个数设置为0即可。
四.删除一个指定的option项:
function removeOne(){ var obj=document.getElementById('mySelect'); obj.options.remove(index); }
将obj.options.remove()函数的参数设置为要删除项的索引即可。
五.获取相应项目的值:
function getValue(){ var obj=document.getElementById('mySelect'); var val=obj.options[index].value; }
使用options[index].value即可获得options集合中相应索引项的值。
六:获取相应项目的文本:
function getText(){ var obj=document.getElementById('mySelect'); var val=obj.options[index].text; }
使用options[index].text即可获得options集合中相应索引项的值。
七:修改执行索引选项:
function updateOption(){ var obj=document.getElementById('mySelect'); var val=obj.options[index]=new Option("新文本","新值"); }
为指定索引值的option项赋值。
JavaScript动态创建select下拉菜单,这样的场景在实际项目中还是用的比较多的,关于JavaScript动态创建select下拉菜单就介绍到这了。