判断select选项中 是否存在Value="paraValue"的Item
向select选项中 加入一个Item
从select选项中 删除一个Item
删除select中选中的项
修改select选项中 value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
js 代码如下：
// 1.判断select选项中 是否存在Value="paraValue"的Itemfunction jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true
break
}
}
return isExit
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在")
} else {
var varItem = new Option(objItemText, objItemValue)
objSelect.options.add(varItem)
alert("成功加入")
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i)
break
}
}
alert("成功删除")
} else {
alert("该select中 不存在该项")
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1
for(var i = length i >= 0 i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText
break
}
}
alert("成功修改")
} else {
alert("该select中 不存在该项")
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true
isExit = true
break
}
}
//Show出结果
if (isExit) {
alert("成功选中")
} else {
alert("该select中 不存在该项")
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex
// 11.清空select的项
document.all.objSelect.options.length = 0
下面通过两种方式使用js来进行获取select具体代码如下:
var
obj = document.getElementByIdx_x(”testSelect”)
定位idvar index =
obj.selectedIndex
选中索引var text = obj.options[index].text
选中文本var
value = obj.options[index].value
选中值jQuery中获得选中select值第一种方式$('#testSelect
option:selected').text()
选中的文本$('#testSelect option:selected')
.val()
选中的值$("#testSelect ").get(0).selectedIndex
索引
第二种方式$("#tesetSelect").find("option:selected").text()//选中的文
本…….val()…….get(0).selectedIndex
select属于浏览器内置组件，标准CSS无法调整其样式。
你可以使用div来模拟select。
首先创建一个<div />来模拟下拉框。
<div class="mySelect"></div>然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />
<div class="mySelect"><div class="mySelectValue"></div>
<div class="mySelectDropdown"></div>
<ul class="mySelectOptions"></ul>
</div>
你可以用CSS来设置自己喜欢的样式。
接下来就是用Javascript来控制模拟的下拉框了。（这里为了方便，使用了jQuery）
// 创建临时DOM，内容为模拟的下拉框（其中省略的部分为上面写的html代码）var $mySelect = $('<div class="mySelect">...</div>')
// 把原来select有的样式复制到模拟的下拉框上
$mySelect.attr('class', $('#select').attr('class'))
$mySelect.attr('style', $('#select').attr('style'))
// 把原来select的选项复制到模拟的下拉框中
$('#select option').each(function () {
var value = $(this).attr('value'),
name = $(this).html()
$mySelect.find('.mySelectOptions').append('<li class="mySelectOption" data-id="' + value + '">' + name + '</li>')
})
// 在模拟下拉框中设置选中的值
$mySelect.find('.mySelectValue').html($('#select option:selected').html())
// 隐藏原有的select
$('#select').hide()
// 给模拟的下拉框绑定事件
$mySelect
.on('click', function (e) {
// 阻止点击事件向上冒泡
e.stopImmediatePropagation()
// 反转下拉列表的显示
$('.mySelectOptions', this).toggle()
// 给原有的select模拟点击事件
$('#select').trigger('click')
})
.on('click', '.mySelectOption', function (e) {
// 阻止点击事件向上冒泡
e.stopImmediatePropagation()
// 把选中的值显示到模拟的下拉框中
$mySelect.find('.mySelectValue').html($(this).html())
// 隐藏下拉列表
$mySelect.find('.mySelectOptions').hide()
// 把选中的值给到原来的select中
$('#select').val($(this).data('id'))
// 给原来的select模拟change事件
$('#select').trigger('change')
})
// 基本功能就到此了。其中可以缓存jQuery对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。
