JavaScript 操作 select元素|select对象 DHTML

JavaScript 操作 select元素|select对象 DHTML
select元素的主要对象有：
1、select对象，代表html中一个select元素对象
2、option对象，代表select元素中的一个选项
3、options对象，代表selec元素中所有option对象的集合

一、在DHTML中获取一个select对象，该select元素的id='selectControl'
var selectTest=document.getElementById("selectControl");
二、创建option对象
var item=new Option("text","value");
三、将option对象添加到select对象的options集合中，DHTML中的select元素会增加一个选项
selectControl.options.add(item);
或者
selectControl.add(item);
以上三步可以实现向select元素中添加选项
四、从select元素中移除一项
selectControl.remove(0);//将select元素的第一项删除了。
五、修改select元素中一项的文本内容
item=selectControl.options(0);
item.text="textchanged";
总结一下，DHTML中select元素对应JavaScript中select对象，select元素中的一个选项就是JavaScript中的一个option对象，
option对象以options集合方式存在于select对象中。
option对象有两个主要属性，text和value，一个对应select元素中的选项文本（可见）,另一个对应select元素选项的值，不可见。
操作options集合主要使用index，即option对象在集合中的索引值，从零开始，依次递增。

select元素的操作JavaScript类

ControlSelect = function(selectID)
{
this.select = document.getElementById(selectID);

//尾部追加选项
this.Append = function(text,value)
{
var item = new Option(text,value);
this.select.add(item);
}
this.append = this.Append;
this.AppEnd = this.Append;
//在before索引位置前插入新选项
this.Insert=function(text,value,before)
{
var item = new Option(text,value);
this.select.add(item,before);
}
this.insert=this.Insert;
//删除指定索引位置的选项
this.Remove = function(index)
{
this.select.remove(index);
}
this.remove = this.Remove;
//修改指定索引位置的文本内容
this.ChangeText=function(text,index)
{
var item = this.select.options(index);
item.text = text;
}
this.changetext = this.ChangeText;
//修改指定索引位置的选项值
this.ChangeValue = function(value,index)
{
var item = this.select.options(index);
item.value = value;
}
this.changevalue=this.ChangeValue;
//清除所有选项
this.Clear = function()
{
length = this.select.options.length;
while(length>0)
{
this.select.remove(0);
}
}
this.clear = this.Clear;
//根据选项中的文本内容查找对应的选项值
this.GetValueByText = function(text)
{
var items = this.select.options;
var length = items.length;
for(i = 0; i < length; i++)
{
item = item[i];
if(item.text == text)
{
return item.value;
}
}
}
this.getvaluebytext = this.GetValueByText;
//根据选项索引查找对应的选项值
this.GetValueByIndex = function(index)
{
var item = this.select.options(index);
return item.value;
}
this.getvaluebyindex = this.GetValueByIndex;
//根据选项值查找对应的选项文本
this.GetTextByValue = function(value)
{
var items = this.select.options;
var length = items.length;
for(i = 0; i < length; i++)
{
item = item[i];
if(item.value == value)
{
return item.text;
}
}
}
this.gettextbyvalue = this.GetTextByValue;
//根据选项索引查找对应文本
this.GetTextByIndex = function(index)
{
var item = this.select.options(index);
return item.text;
}
this.gettextbyindex = this.GetTextByIndex;
//根据选项值查找对应索引
this.GetIndexByValue = function(value)
{
var items = this.select.options;
var length = items.length;
for(i = 0; i < length; i++)
{
item = item[i];
if(item.value == value)
{
return i;
}
}
}
this.getindexbyvalue = this.GetIndexByValue;
//根据索引值查找对应文本
this.GetIndexByText = function(text)
{
var items = this.select.options;
var length = items.length;
for(i = 0; i < length; i++)
{
item = item[i];
if(item.text == text)
{
return i;
}
}
}
this.getindexbytext = this.GetIndexByText;
//当前选项的索引值
this.SelectedIndex = function()
{
return this.select.selectedIndex;
}
this.selectedIndex = this.SelectedIndex;
//当前选项的值
this.SelectedValue = function()
{
var item = this.select.options(this.select.selectedIndex);
return item.value;
}
this.selectedValue = this.SelectedValue;
//当前选项的文本
this.SelectedText = function()
{
var item = this.select.options(this.select.selectedIndex);
return item.text;
}
this.selectedText = this.SelectedText;
}