您的位置：首页 > Web前端 > JavaScript

javascript操作select

2013-04-23 13:24 127 查看

一、基础理解：

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

e.options = new Option("文本", "值"); //创建一个option对象，即在<select>标签中创建一个或多个<option value="值">文本</option>。options是一个数组，里面可存放多个<option
value="值">文本</option>标签。

or var opt = new Option('北京','beijing');

opt.setAttribute('selected', 'selected');

$("names").appendChild(opt);

1、options数组的属性：

length -------长度属性

selectedIndex ------ 当前被选中的文本的索引值，此索引值是内存自动分配的(0,1,2,3....)对应(第一个文本值，第二个文本值，第三个文本值，第四个文本值.......)

2、单个option的属性(即obj.options[obj.selectedIndex]是指定的某个<option>标签)：

text ===== 返回/指定文本

value =====返回/指定文本，与<option value="...">一致

index ======返回下标

selected======返回/指定该对象是否被选中，指定true or false可动态改变选中项

defaultSelected =====返回该对象默认是否被选中，true/false

3、option的方法：

增加一个<option>标签======obj.options.add(new("文本", "值"))

删除一个<option>标签======obj.options.remove(obj.selectedIndex);

获取一个<option>标签======obj.options[obj.selectedIndex].text ;

修改一个<option>标签======obj.options[obj.selectedIndex] = new Option("新文本", "值") ;

删除所有<option>标签======obj.options.length = 0 ;

获取一个<option>标签的值====obj.options[obj.selectedIndex].value ;

注意：

obj.option中的option不需要大写

new Option中的option需要大写

实例/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

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_x('mySelect');

//添加一个选项

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

}

4.删除所有选项option

function removeAll(){

var obj=document.getElementByIdx_x('mySelect');

obj.options.length=0;

}

5.删除一个选项option

function removeOne(){

var obj=document.getElementByIdx_x('mySelect');

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

var index=obj.selectedIndex;

obj.options.remove(index);

}

6.获得选项option的值

var obj=document.getElementByIdx_x('mySelect');

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

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

7.获得选项option的文本

var obj=document.getElementByIdx_x('mySelect');

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

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

8.修改选项option

var obj=document.getElementByIdx_x('mySelect');

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

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

9.删除select

function removeSelect(){

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

mySelect.parentNode.removeChild(mySelect);

********************************************************************************

//设定那个选项被选中

select.options[i].selected=true

select.value="value"

select.selectedIndex = index;

//创建新的Option对象

new Option(text,value)

new option(text,value,defaultSelected,selected

text:字符串，指定option对象的text属性(即<option></option>之间的文字)

value:字符串，指定option对象的value属性

defaultSelected:布尔值，指定option对象的defaultSelected属性

selected:布尔值，指定option对象的selected属性

//向select中增加Option

select.add(new Option(text,value))

//删除

select.options.remove(index)

//一次性删除全部

select.length = 0;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<BODY>

<select name="actorname" id="actor">

<option value="all">全部</option>

<option value="hstf">黑色头发</option>

<option value="zstf">紫色头发</option>

<option value="bj">北京</option>

<option value="hjyy">海军医院</option>

<option value="kjyy">空军医院</option>

<option value="ljyy">陆军医院</option>

</select>

</BODY>

<script>

function selectValue(sId,value){

var s = document.getElementById(sId);

var ops = s.options;

for(var i=0;i<ops.length; i++){

var tempValue = ops[i].value;

if(tempValue == value)

{

ops[i].selected = true;

}

}

}

selectValue('actor','hstf');

</script>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航