using onChange for menu selection in jquery

Question

My below code works fine and is used to populate a <select> item with dynamic <options> The problem is that say I end up with 3 <options> say: One / Two / Three and then I select the first <option> so that I can call jquery code to populate the next menu. One is already the <selected> item in the menu so it is not recognized as a onChange event.

So I would need to select Two then One to call the onChange for One.

Is there something I should use instead of onChange? Or should I put in a blank <option> item as the default value? So there will always be a change?

//if the job menu is changed
$('#job').change (function () 
{

 $.get('ajax/employee_menu.php', { job: $('#job').val() },      
    function(data) 
 {
    //load the <options> into the element
  $("#employee").html( data );
   // show the menu once loaded
  $("#employee").css({ "display" : "inline" });
  });
});

Answer 1

I in fact faced the same issue on a page I was working on last week. I separated the onChange function and called in on document.ready so that it does get invoked immediately with the First selected value.

$(function()
{
    ChangeFunction();
});

$('#job').change(ChangeFunction);

function ChangeFunction()
{
    $.get('ajax/employee_menu.php', { job: $('#job').val() },      
    function(data) 
    {
        //load the <options> into the element
        $("#employee").html( data );
        // show the menu once loaded
        $("#employee").css({ "display" : "inline" });
    });
}

Answer 2

Different browsers offer different support for <select /> element events. You can use the onclick event, however it is only supported fully in Firefox. Other browsers won't support it.

You're better off using the onchange event and providing a default option. Alternatively, you could use jQuery to change the <select /> tag to a purely HTML-based combo box, like in this jquery.combobox plugin. That may work better for your purposes.

Drop-downs don't have anything close to consistent support for standard events at the current time (and haven't for the past few years, unfortunately).

Answer 3

You can pre-populate the second select with PHP, so the page renders with OPTION elements for the second select too. That's what I'd do anyway.