0

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

4
  • Can't you just use $('#cat_list') instead of $(this)? It'll be fine as long as you work with id.
    – Kamil T
    Jun 21 '13 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.com/ready In your code, 'this' refers to document
    – A. Wolff
    Jun 21 '13 at 11:14
  • You don't need ready callback for your element because you are already using it dor document
    – sdespont
    Jun 21 '13 at 11:16
  • you don't have to check ` $('#cat_list').ready(function(){` when it is inside document.ready
    – bipen
    Jun 21 '13 at 11:16
1

Correct code is:

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

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

0

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 recommended)
  • $(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);
});
1
  • Thanks a lot for taking your time helping a newbie :) that helped me understand what I was doing wrong
    – mitt
    Jun 21 '13 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.