How can I show a label depending on whether a drop-down list has options?

Question

I have a drop down list that is populated through a Javscript function provided by an external company. It basically checks if the input is of a valid postcode type and then returns possible addresses into a drop-down list.

I am stuck as to how to then display a little message once the drop-down list has some options, i.e. some address have been found and populated into the select.

I've tried this:

$(function() {
  function showmsg() {
    if ($("#selectaddress").length > 1)
      $('#buttonhint2').slideDown('normal');
  }
  $("#btnFind").click(showmsg)
});

But it doesn't do anything. I'm a complete novice to this all so I'm not sure if I'm even barking up the right tree. Any help much appreciated.

Answer 1

Try moving your function showmsg() outside of the document ready:

function showmsg() {
  if ($("#selectaddress").length > 1)      
    $('#buttonhint2').slideDown('normal');  
} 
$(function() {   
   $("#btnFind").click(showmsg)
});

Answer 2

Well, you would likely have to wait until that external function actually runs its code. I don't know anything about this function or where that is run so I can't help you too much. If it provides a way for you to give it a callback function, simply pass it the 'showmsg' function that you have (and wrote outside of the document ready statement as Jimmie mentioned).

If it doesn't allow for a callback function parameter and you know it runs when the page is loaded, you can delay your showmsg function by, say, 500 ms or something.. That might give ample time for the first script to run (but, you would want to play around with this until you get it right). If the first function uses AJAX to retrieve the data then you may want to reconsider using that function or simply modify this third-party function (if the license permits) to add callback functionality.

You can set your script to delay like so:

$(function() {
    setTimeout(function() {
        if ($("#selectaddress option").length > 0) {    
            $('#buttonhint2').slideDown('normal');  
        }
    },500);
});

Also, take not that you need to check for the number of options in your select box not the number of select boxes you have on the page. And you were checking for at least two options before, the script I provided checks for at least 1.