获取HTML选择元素的预选值。

Question

或者通过示例，无论用户是否更改了"c“，如何通过JavaScript或jQuery检索”c“？

<select id="select-menu">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c" selected>C</option>
    <option value="d">D</option>
</select>

但是，它返回当前选定菜单的值。我想我可以采取一种类似的方法，在页面加载上运行并保存值，但希望有一种更“适当”的方法来这样做。

$('#select-menu > option').each(function(i){
    if(this.selected) {
        console.log(this.value)
         $("#submit").val(this.value);
         return false;
    }
})

Answer 1

使用jQuery .attr()获取初始值：

​

function get_initial(){

    $('#select-menu > option').each(function(i){
    
        if($(this).attr('selected')) {
            console.log('initial: ' + this.value)
        }

        if(this.selected) {
            console.log('current: ' + this.value)
        }
    
    })

}

$('.initial').on('click', get_initial);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-menu">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c" selected>C</option>
    <option value="d">D</option>
</select>

<button class="initial">check initial</button>

​

Answer 2

没有更好的办法了。选择是指用户可修改的。

如果要保留原始值，可以在加载时保存它：

$(document).ready(function() {
    var initialValue = $("#select-menu").val();
});

您还可以将其写入隐藏的输入中：

<input type="hidden" name="initial-select-menu" value="c">

这种方法的好处是，值将与表单的其余部分一起提交。在某些情况下可能更好。

也可以将初始值填充到data属性中：

<select id="select-menu" data-initial="c">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c" selected>C</option>
    <option value="d">D</option>
</select>

Answer 3

您可以将值保存在html5数据-*属性上：

<select id="select-menu" data-default="c">

把它拿来

$("#select-menu").attr("data-default");