javascript中select下拉菜单常见处理方法
一个小例子：
| 代码如下 | |
|
<form name="selectform" > |
|
首先取得option的value值，相对简单，在select标签上没有value属性，
option的value值就是select的value。
所以求得select value的值的方法如下
| 代码如下 | |
|
var ss = document.selectform.test; var value= ss.value;//1或者2。。。 |
|
很多ide提示在select和option上面都没有selectIndex的属性提示，但是js能通过selectIndex这个属性获取选择项的
相关信息
可能是因为selectIndex是一个动态的列，它总是跟随selected属性改变，所以ide才没有自动提示
获取select text的值方法如下：
| 代码如下 | |
|
var ts1 = ss.options[ss.selectedIndex].text;//第一或者第二。。。 |
|
还可以用innerText获取：
| 代码如下 | |
|
var ts2 = ss.options[ss.selectedIndex].innerText;//第一或者第二。。。 |
|
可以打印下看看
| 代码如下 | |
|
alert(ts1); |
|
常用的关于 select 用法。
| 代码如下 | |
|
1.动态创建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("文本","值")); //这个只能在IE中有效 obj.options.add(new Option("text","value")); //这个兼容IE与firefox }
3.删除所有选项option
function removeAll(){ var obj=document.getElementByIdx_x('mySelect'); obj.options.length=null; }
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); } //1.判断是否存在指定value的Item function ExistValue(obj,value){ for(var i=0;i<obj.options.length;i++){ if(obj.options[i].value == value){ return true; } } return false; } //2.加入一个Item function AddItem(obj,text,value){ var varItem = new Option(text,value); obj.options.add(varItem); } //3.删除值为value的所有Item function RemoveItems(obj,value){ for(var i=0;i<obj.options.length;i++){ if(obj.options[i].value == value){ obj.remove(i); } } } //4.删除某一个index的选项 function RemoveItem(obj,index){ obj.remove(index); }
//5.更新第index项的value和text function UpdateItem(obj,index,value,text){ obj.options[index].value = value; obj.options[index].text = text; }
//6.设置select中指定text的第一个Item为选中 function SelectItemByText(obj,text){ var isExit = false; for(var i=0;i<obj.options.length;i++){ if(obj.options[i].text == text){ obj.options[i].selected = true; return true; } } return false;
} //7.设置select中指定value的第一个Item为选中 function SelectItemByValue(obj,value){ var isExit = false; for(var i=0;i<obj.options.length;i++){ if(obj.options[i].value == value){ obj.options[i].selected = true; return true; } } return false;
} //8.得到当前选中项的value，index,text function GetValue(obj){ return obj.value; } //9.得到当前选中项的index function GetIndex(obj){ return obj.selectedIndex; } //10.得到当前选中项的text function GetText(obj){ return obj.options[obj.selectedIndex].text; } //11.清空所有选项 function Clear(obj){ obj.options.length = 0; } |
|
