CODEWITHSUNDEEP
javascriptjquery
Ron van der Heijden
Ron van der Heijden

Reputation: 15070

Get select value when page is loaded

I have a function to detect the value and do some stuff (not important for the question). I am unable to get the value when the page is ready, but when selecting a value, it can find the value. How can I pass this to the function?

HTML

<select id="select">
    <option value="choise1">choise1</option>
    <option value="choise2">choise2</option>
    <option value="choise3" selected="selected">choise3</option>
    <option value="choise4">choise4</option>
</select>

Javascript

function check_select() {
    alert( "!" + $( this ).val() + "!" );
}

$('#select').on( 'change', check_select );

// Why is value not set?
$('#select').ready( check_select );

Example: http://jsfiddle.net/7en4op4j/

Upvotes: 1

Views: 1099

Answers (5)

Theo Itzaris
Theo Itzaris

Reputation: 4681

there is not ready event for dom elements, at least i have never used it in that way. You can use $(document).on('ready',callback) to execute somethin(code) when the all the DOM is ready. That is why it does not work correct.

instead of this just use $(document).on('ready',function) , and keep the check_select function for the change event.

function check_select() {
    alert( "!" + $( this ).val() + "!" );
}

$('#select').on( 'change', check_select );

$(document).on('ready',function(){  
  alert($('select').val());
})

live jsfiddle :http://jsfiddle.net/tornado1979/7en4op4j/7/

hope helps,good luck

Upvotes: 0

Help
Help

Reputation: 1156

On load of the function your trying to read the value with 'this' which is the object of the document. instead of using 'this' select id.

Fiddle : http://jsfiddle.net/7en4op4j/1/

function check_select() {
alert( "!" + $( '#select' ).val() + "!" );

}

Upvotes: 0

vijayP
vijayP

Reputation: 11502

Modified your code a bit. Used $(document).ready() instead:

http://jsfiddle.net/7en4op4j/5/

function check_select(obj) {
    alert( "!" + $( obj ).val() + "!" );
}

$('#select').on( 'change',  function(){
    check_select($(this));
                 } );

// Why is value not set?
$(document).ready( function(){
    check_select($("#select")) 
});

Upvotes: 0

Jamiec
Jamiec

Reputation: 136104

Your fiddle is set to onDomReady, if you change this to No wrap, in head then you can take advantage of jQuery's handling of dom ready.

Thereafter, what you want to do is call your method with the context of this set to the select element in question:

check_select.call($('#select')[0])

Updated fiddle: http://jsfiddle.net/7en4op4j/2/

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

select elements do not raise a ready event. To do what you require you would need to just call the check_select() function in the document.ready handler itself. You would also need to change the scope of this within the function due to the logic in the function. To do that you can use $.proxy():

$(function() {
    $('#select').on('change', check_select); // on change
    $.proxy(check_select, $('#select'))(); // on load
});

Updated fiddle

Upvotes: 2

Related Questions