获取 select HTML select 元素的预 select 值

Question

或者通过示例，无论用户是否更改它，如何通过 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>

我尝试了以下方法，但是，它 returns 当前所选菜单的值。我想我可以采用类似的方法，在页面加载时运行并保存值，但希望有更多 "proper" 方法可以做到这一点。

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

Answer 1

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

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

并通过

获取

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

Answer 2

没有更好的办法。 select 是用户可修改的。

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

$(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

使用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 4

以下代码展示了与使用 JavaScript 从 select 字段获取值相关的各种示例。

工作代码段

const selectMenu = document.getElementById("select-menu");

var selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;

/*Option 1*/
selectMenu.onchange = function() {
  selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;
}

/*Option 2*/
/*selectMenu.addEventListener("change", function(){
  selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;
})*/

/*Option 3*/
/*function updateSelectedIndex() {
  selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;
}*/

document.writeln(selectedIndex);

<!-- Option 3 -->
<!-- <select id="select-menu" onchange="updateSelectedIndex"> -->
<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>

Answer 5

在适当的情况下试试这个：

 let preselectedOption = $(targetDropDown).find('option[selected]');
 let currentOption = $(targetDropDown).find('option:selected');

获取 select HTML select 元素的预 select 值

Get pre-selected value of an HTML select element

html

javascript

jquery

html-select