使用javascript如何改变select控件的选中项?

JavaScript09

使用javascript如何改变select控件的选中项?,第1张

你好!!

可以通过设置value和selectedIndex来改变选中项:

    var obj=document.getElementById('selTest')

    obj.selectedIndex = 0       //通过设置选中项索引

    obj.value = 0                     //通过设置选中项的值

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对象来优化,还能添加焦点事件,键盘事件等,按自己的需求慢慢修改吧。