select 元素常用属性(方法):
add(newOption, relOption) — 添加新的option元素在relOption元素之前。
multiple — Boolean值。默认值为false,select 元素默认单选。
remove(index) — 删除索引为index的option元素。
selectedIndex — 选中的option元素的索引。如果是多选,则返回第一个option的索引。没有选中的元素返回-1.
options — HTMLCollection 对象,包含select元素下的 option 元素。
type —— 取值为 "select-one" 或 "select-multiple",表示它是单选或多选。
注意:关于selec元素的value值:
a)如果没有元素选中,单选情况下,取第一个option的值,多选情况下值为空字符串。
b)如果有多个元素选中,只返回第一个option的值。
c)如果选中的option没有设置value,那么在IE6/7/8中,值为空字符串,在IE9+以及其他浏览器中,option的显示文本,将作为值返回。
// 示例
<select name="location" id="selLocation" multiple>
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option> // value: "Mountain View, CA"
<option value="">China</option> // value: ""(空字符串)
<option>Australia</option> // value:"Australia"
</select>
option元素的常用属性(方法):
index — option在 select元素的options对象中的索引
selected — Boolean ,true表示被选中
text — 显示的文本
value — 值
//添加option元素:
var newOption = new Option("Option text", "Option value");
//这个调用在IE6/7/8下,无法正常运行。
// selectbox.appendChild(newOption);
/* 改用以下方式:第二个参数(relOption)表示option添加在relOption之前,对于IE6/7/8是无效的,为了兼容,我们设置为undefined.
其结果是 该option默认添加到最后。如果我们需要控制option的位置,可以利用 insertBefore() 方法。
*/
selectbox.add(newOption, undefined);
// 删除 option 元素:
selectbox.removeChild(selectbox.options[0]);
OR:
selectbox.remove(0); //remove first option
//修改option的位置
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);//调换了前2个option的位置。
//获取select元素选中的option值
function getSelectValue(selectbox){
var result = new Array();
var option = null;
for (var i=0, len=selectbox.options.length; i < len; i++){
optValue = null;
option = selectbox.options[i];
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
result.push(optValue);
}
return result;
}
select,option 元素的DOM操作:
最新推荐文章于 2023-03-07 16:30:09 发布