获取 HTML 选择元素的预选值

Question

Or through example, how can one retrieve "c" via JavaScript or jQuery no matter if the user changed it?

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

I tried the following, however, it returns the value of the currently selected menu. I suppose I can take a similar approach which runs upon page load and save the value, but expect there is a more "proper" way to do so.

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

Answer 1

There is no better way. A select is meant to be user-modifiable.

If you want to retain the original value you could save it on load:

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

You could also write it in a hidden input:

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

This way has the benefit that the value will be submitted along with the rest of the form. Might be preferable in some cases.

Or you could stuff that initial value in a data attribute:

<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 2

Use jQuery .attr() to get initial value:

 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 3

You could save the value on an html5 data-* attribute:

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

And get it with

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

Answer 4

The following code exhibits various examples related to getting of values from select fields using JavaScript.

Working Snippet

 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

Try this for the appropriate cases:

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