javascript select 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.getElementById('mySelect');

//添加一个选项
obj.add(new Option("文本","值"));
}

4.删除所有选项option

function removeAll(){
var obj=document.getElementById('mySelect');

obj.options.length=0;

}

5.删除一个选项option

function removeOne(){
var obj=document.getElementById('mySelect');

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

var index=obj.selectedIndex;
obj.options.remove(index);
}

6.获得选项option的值

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

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

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

7.获得选项option的文本

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

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

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

8.修改选项option

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

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

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

9.删除select

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

javascript select option对象

一、基础理解:

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

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

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需要大写

二、示例:

<html>   

<head>   

<script language="javascript">   

function chk(){   

var obj = document.getElementById("mySelect");   

        obj.options[obj.selectedIndex] = new Option("我的测试","4");//改变当前选中的文本

        //obj.options.add(new Option("我的测试","4"));//再添加一个option   

        //alert(obj.selectedIndex);//显示序号,option自己设置的   

     // obj.options[obj.selectedIndex].text = "我的测试";//更改值   

     //obj.remove(obj.selectedIndex);逐个删除   

     //obj.options.length = 0;//删除全部

     //t = obj.options[obj.selectedIndex].text;//获取文本

     //alert(t);

   

     //v = obj.options[obj.selectedIndex].value;//获取选中文本的值

    // alert(v);

}   

</script>   

</head>   

<body>   

<select id="mySelect">   

         <option value="1111">我的1111</option>   

         <option value="2222">我的2222</option>   

         <option value="3333">我的3333</option>   

         <option value="4444">我的4444</option>   

</select>   

<input type="button" name="button" value="查看结果" οnclick="javascript:chk();">   

</body>   

</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值