select,option 元素的DOM操作:

30 篇文章 0 订阅

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;
}

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值