Jquery操作select下拉框值

作者 LoadingMore 日期 2017-08-16
Jquery操作select下拉框值

前言

最近项目中操作select的option值得场景还是很多的,在此记录一下,以免忘记

结构

<select id="selected">
    <option value="1" data-id="1000"></option>
    <option value="2" data-id="1001"></option>
    <option value="3" data-id="1002"></option>
    <option value="4" data-id="1003"></option>
</select>

操作

// change事件中进行操作
$('#selected').on('change',function(){
    // 获取被选中的option 自定义属性
    var selectedOpt = $('#selected').find('option:selected').attr('data-id')

    //获取下拉框选中项的value属性值
    var selectedVal = $('#selected').val()

    //获取下拉框选中项的index属性值
    var selectedIndex = $("#selected").get(0).selectedIndex

    console.log(selectedIndex)
})

//设置下拉框值为4的option选中
function setOpt(){
    $('#selected option[value=4]').attr('selected','selected')
}
// setOpt()

//在下拉框最后添加一个选项
function addOpt(){
    $('#selected').append('<option value="5" data-id="1004">蘑菇云</option>')
}
// addOpt()

//移除下拉框最后一个选项
function removeLastOpt(){
    $('#selected option:last').remove()
}
// removeLastOpt()

// 获取最后一个下拉框自定义属性值
var selectMaxIndex = $("#selected option:last").attr("data-id");