I'm trying to get the value of a dropdown's option (there is an id on the select markup), when opening the web page

Using

$(document).ready(function() {

  $('#cat_list').ready(function(){
  var category =  $(this).val();
  alert(category);
  });

});

I get a blank alert.

But Using .change (when selecting something else inside the dropdown) the following code works perfectly with the same function

$(document).ready(function() {

  $('#cat_list').change(function(){
  var category =  $(this).val();
  alert(category);
  });

});

Finally, this works using basic javascript and it gets successfully the values on open, refresh, on form submit fail, ... etc

$(document).ready(function() {

  $('#cat_list').ready(function(){
  var e = document.getElementById("cat_list");
  var category = e.options[e.selectedIndex].value; 
  alert(category);
  });

});

Thanks for any help on why the first version .ready + $(this).val(); fails

I'm trying to get the value of a dropdown's option (there is an id on the select markup), when opening the web page

Using

$(document).ready(function() {

  $('#cat_list').ready(function(){
  var category =  $(this).val();
  alert(category);
  });

});

I get a blank alert.

But Using .change (when selecting something else inside the dropdown) the following code works perfectly with the same function

$(document).ready(function() {

  $('#cat_list').change(function(){
  var category =  $(this).val();
  alert(category);
  });

});

Finally, this works using basic javascript and it gets successfully the values on open, refresh, on form submit fail, ... etc

$(document).ready(function() {

  $('#cat_list').ready(function(){
  var e = document.getElementById("cat_list");
  var category = e.options[e.selectedIndex].value; 
  alert(category);
  });

});

Thanks for any help on why the first version .ready + $(this).val(); fails

• javascript
• jquery
• selected

• Can't you just use $('#cat_list') instead of $(this)? It'll be fine as long as you work with id. – Kamil T Commented Jun 21, 2013 at 11:14
• 1 Check the DOC: <<The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.>> api.jquery./ready In your code, 'this' refers to document – A. Wolff Commented Jun 21, 2013 at 11:14
• You don't need ready callback for your element because you are already using it dor document – sdespont Commented Jun 21, 2013 at 11:16
• you don't have to check ` $('#cat_list').ready(function(){` when it is inside document.ready – bipen Commented Jun 21, 2013 at 11:16

3 Answers 3

Correct code is:

$(document).ready(function () {
    var category = $('#cat_list').val();
    alert(category);
});

$(document).ready itself means the whole document (including #cat_list) is ready to be processed. why are you checking if an element is ready or not!!??

you can directly use the value of the element like

$('#cat_list').val();

The documentation says that .ready:

Specify a function to execute when the DOM is fully loaded.

And 3 possible usage cases are:

• $(document).ready(handler)
• $().ready(handler) (this is not remended)
• $(handler)

However you can actually assign .ready to any element and it will be triggered:

$('#cat_list').ready(function(){

});

This code is fired. BUT this inside .ready function always refers to document.

It will work this way:

$(document).ready(function() {
  $('#cat_list').ready(function(){
      var category =  $('#cat_list').val();
      alert(category);
  });
});

But actually your code is overengineered:

$(document).ready(function() {
    var category =  $('#cat_list').val();
    alert(category);
});