js添加select值

//2.向select选项中 加入一个Item

function jsAddItemToSelect(objSelect,objItemText,objItemValue)

{

//判断是否存在

if(jsSelectIsExitItem(objSelect,objItemValue))

{

alert("该Item的Value值已经存在")

}

else

{

var varItem = new Option(objItemText,objItemValue)

// objSelect.options[objSelect.options.length] = varItem

objSelect.options.add(varItem)

alert("成功加入")

}

}

css是无法去掉默认select的下拉箭头的，除非自己用div+js+css实现自定义select控件。

1、定义html中的select标签

<form> 

<a class="btn-select" id="btn_select"> 

<span class="cur-select">请选择</span> 

<select> 

<option>选项一</option> 

<option>选项二</option> 

<option>选项三</option> 

<option>选项四</option> 

<option>选项五</option> 

</select> 

</a> 

</form>

2、定义css样式：

* { 

margin: 0 

padding: 0 

} 

body { 

padding: 50px 50px 

} 

.btn-select { 

position: relative 

display: inline-block 

width: 150px 

height: 25px 

background-color: #f80 

font: 14px/20px "Microsoft YaHei" 

color: #fff 

} 

.btn-select .cur-select { 

position: absolute 

display: block 

width: 150px 

height: 25px 

line-height: 25px 

background: #f80 url(ico.png) no-repeat 125px center 

text-indent: 10px 

} 

.btn-select:hover .cur-select { 

background-color: #f90 

} 

.btn-select select { 

position: absolute 

top: 0 

left: 0 

width: 150px 

height: 25px 

opacity: 0 

filter: alpha(opacity: 0) 

font: 14px/20px "Microsoft YaHei" 

color: #f80 

} 

.btn-select select option { 

text-indent: 10px 

} 

.btn-select select option:hover { 

background-color: #f80 

color: #fff 

}

3、定义点击事件JS：

var $$ = function (id) { 

return document.getElementById(id) 

} 

window.onload = function () { 

var btnSelect = $$("btn_select") 

var curSelect = btnSelect.getElementsByTagName("span")[0] 

var oSelect = btnSelect.getElementsByTagName("select")[0] 

var aOption = btnSelect.getElementsByTagName("option") 

oSelect.onchange = function () { 

var text=oSelect.options[oSelect.selectedIndex].text 

curSelect.innerHTML = text 

} 

}

4、最终效果：

---