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下拉菜单就介绍到这了。

回复

我来回复
  • 暂无回复内容