JS操作select下拉框动态变动,select下拉框操作常用

作者: 关于计算机  发布:2019-09-20

复制代码 代码如下:

1.动态创建select

function AddDropDownList(id,fatherCtl)
{
if(!document.getElementById(id))
{
var ddl = document.createElement('select');
ddl.setAttribute("id",id);
if(fatherCtl&&document.getElementById(fatherCtl))
document.getElementById(fatherCtl).appendChild(ddl);
else
document.body.appendChild(ddl);
}
}
//删除指定的下拉框
function RemoveDropDownList(id)
{
var ctl = document.getElementById(id);
if(ctl)
ctl.parentNode.removeChild(ctl);
}
//给下拉框添加选项
function AddDDDLOption(id,text,value)
{
var ctl = document.getElementById(id);
if(ctl)
{
ctl.options[ctl.options.length] = new Option(text,value);
}
}
//删除所有选项
function RemoveAllDDLOptions(id)
{
var ctl = document.getElementById(id);
if(ctl)
{
ctl.options.length=0;
}
}
//删除指定索引的选项
function RemoveDDLOption(id,index)
{
var ctl=document.getElementById(id);
if(ctl && ctl.options[index])
{
ctl.options[index]=null;
}
}
//获取下拉框选择的值
function GetDDLSelectedValue(id)
{
var ctl = document.getElementById(id);
if(ctl)
{
return ctl.options[ctl.selectedIndex].value;
}
}
//获取下拉框选择的文本
function GetDDLSelectedText(id)
{
var ctl = document.getElementById(id);
if(ctl)
{
return ctl.options[ctl.selectedIndex].text;
}
}

复制代码 代码如下:

您可能感兴趣的文章:

  • js实现Select下拉框具有输入功能的方法
  • JS操作select下拉框动态变动(创建/删除/获取)
  • JavaScript实现将数组数据添加到Select下拉框的方法
  • JS Select下拉框(支持输入模糊查询)
  • javascript中select下拉框的用法总结
  • JavaScript实现向select下拉框中添加和删除元素的方法
  • JavaScript实现两个select下拉框选项左移右移
  • js实现可输入可选择的select下拉框
  • jquery及原生js获取select下拉框选中的值示例
  • JavaScript实现获取select下拉框中第一个值的方法

function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

2.添加选项option

复制代码 代码如下:

function addOption(){
//根据id查找对象,
var obj=document.getElementByIdx_x('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}

3.删除所有选项option

复制代码 代码如下:

function removeAll(){
var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
}

4.删除一个选项option

复制代码 代码如下:

function removeOne(){
var obj=document.getElementByIdx_x('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

5.获得选项option的值

复制代码 代码如下:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

6.获得选项option的文本

复制代码 代码如下:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

7.修改选项option

复制代码 代码如下:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

8.删除select

复制代码 代码如下:

function removeSelect(){
var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

您可能感兴趣的文章:

  • js实现Select下拉框具有输入功能的方法
  • JavaScript实现将数组数据添加到Select下拉框的方法
  • Javascript select下拉框操作常用方法
  • JS Select下拉框(支持输入模糊查询)
  • javascript中select下拉框的用法总结
  • JavaScript实现向select下拉框中添加和删除元素的方法
  • JavaScript实现两个select下拉框选项左移右移
  • js实现可输入可选择的select下拉框
  • jquery及原生js获取select下拉框选中的值示例
  • JavaScript实现获取select下拉框中第一个值的方法

本文由贝博体育app发布于关于计算机,转载请注明出处:JS操作select下拉框动态变动,select下拉框操作常用

关键词: