SELECT控件操作的JS代码示例

Posted 2020-08-03

SELECT控件操作的JS代码示例

 

1 检测是否有选中

if(objSelect.selectedIndex > -1) {

//说明选中

} else {

//说明没有选中

}

 

2.动态创建select

function createSelect(){

var mySelect = document.createElement_x("select");

mySelect.id = "mySelect";

document.body.appendChild(mySelect);

}

 

3.添加选项option

function addOption(){

//根据id查找对象，

var obj=document.getElementByIdx(‘mySelect‘);

//添加一个选项

obj.add(new Option("文本","值"));

}

4.删除所有选项option

function removeAll(){

var obj=document.getElementByIdx(‘mySelect‘);

obj.options.length=0;

}

 

5.删除一个选项option

function removeOne(){

var obj=document.getElementByIdx(‘mySelect‘);

//index,要删除选项的序号，这里取当前选中选项的序号

var index=obj.selectedIndex;

obj.options.remove(index);

}

 

6.获得选项option的值

var obj=document.getElementByIdx(‘mySelect‘);

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

 

7.获得选项option的文本

var obj=document.getElementByIdx(‘mySelect‘);

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

 

8.修改选项option

var obj=document.getElementByIdx(‘mySelect‘);

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

 

9.删除select

function removeSelect(){

var mySelect = document.getElementByIdx("mySelect");

mySelect.parentNode.removeChild(mySelect);

}

 

一、基础理解：

var e = document.getElementByIdx("selectId");

e.options = new Option("文本", "值"); //创建一个option对象

，即在标签中创建一个或多个。options是一个数组，里面可存放多个标签。

 1、options数组的属性： length -------长度属性 selectedIndex ------ 当前被选中的文本的索引值，此索引值是内存自动分配的(0,1,2,3....)对应(第一个文本值，第二个文本值，第三个文本值，第四个文本值.......)

2、单个option的属性(即obj.options[obj.selectedIndex]是指定的某个

 

全选" onclick="choiceAll(‘left‘)">     未选择

全选" onclick="choiceAll(‘right‘)">

<SELECTmultiple="multiple"[J1] style="width:200px" size="20" id="left" >  添加" onclick="move(‘left‘,‘right‘)" style="background: #deb887;">

删除>>" onclick="move(‘right‘,‘left‘)" style="background:#ffebcd;">    <SELECTmultiple="multiple" style="width:200px" size="20" id="right" >