CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-select
user1032531
user1032531

Reputation: 26281

Get pre-selected value of an HTML select element

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;
    }
})

Upvotes: 3

Views: 3657

Answers (5)

Klyuch
Klyuch

Reputation: 64

Try this for the appropriate cases:

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

Upvotes: 0

S&#233;bastien
S&#233;bastien

Reputation: 12139

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>

Upvotes: 2

boulaffasamine
boulaffasamine

Reputation: 21

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>

Upvotes: 0

jeprubio
jeprubio

Reputation: 18002

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");

Upvotes: 1

Rauli Rajande
Rauli Rajande

Reputation: 2020

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>

Upvotes: 2

Related Questions