select option简单使用记录

来源:互联网 发布:nginx编译安装 编辑:程序博客网 时间:2024/06/09 20:00

废话不说,直接上代码

/**
 * select的onChange事件:this代表的是select对象,不是option对象
 */
<select id="selectid" onChange="createOption(this);"><option did="" idvalue="" value="">===请选择===</option></select>
/**
 * 创建option,每次创建之前清空【请选择】option下面的所有option
 * @return
 */
function createOption(selectObj){
//var selectObj = document.getElementById("selectid");
deleteOption(selectObj);
//new Option([文字[,值[,defaultSelected[,selected]]]]),貌似添加后两个参数有问题
var option = new Option("文本","值");//也可document.createElement("option");
//我的option有 did="" idvalue="" 两个属性,而new Option()构造函数没有为这两个属性赋值功能,所以
option.did = "111111111111111111";
option.idvalue = "22222222222222";
//当然option.text="文本"  option.value="值"
selectObj.add(option);

/**几个属性:
* selectObj.selectedIndex;当前选中option索引
* option.index;此option索引
* options[i].selected可以作为if条件判断当前option是否为选中状态
* options[i].selected = true;设定当前option为选中状态
* var options = selectObj.options;
for(i=0;i<options.length;i++){
if(options[i].selected){
alert(options[i].idvalue);
}
}
*/
}
/**
 * 删除清空当前select标签中除了第一个option之外所有option
 * @param selectObj
 * @return
 */
function deleteOption(selectObj){
var optionsObj = selectObj.options;
for(var i=1;i<optionsObj.length;i++){
optionsObj[i] = null;
i=i-1;
}
}

原创粉丝点击