Jquery Dependent Dropdown to load on document ready

Question

Hello I have a depdent dropdown for country sate and city and i want to load states and cities based on country on document ready function i tried to put document.ready (function())

but nothing works please update me how can i use this

my code is here

   function showState(sel) {
    var country_id = sel.options[sel.selectedIndex].value;  
    $("#output1").html( "" );
    $("#output2").html( "" );
    if (country_id.length > 0 ) { 

     $.ajax({
            type: "POST",
            url: "fetch_state.php",
            data: "country_id="+country_id,
            cache: false,
            beforeSend: function () { 
                $('#output1').html('<img src="images/loading.gif">');
            },
            success: function(html) {    
                $("#output1").html( html );
            }
        });
    }
}

function showCity(sel) {
    var state_id = sel.options[sel.selectedIndex].value;  
    if (state_id.length > 0 ) { 
     $.ajax({
            type: "POST",
            url: "fetch_city.php",
            data: "state_id="+state_id,
            cache: false,
            beforeSend: function () { 
                $('#output2').html('<img src="images/loading.gif">');
            },
            success: function(html) {    
                $("#output2").html( html );
            }
        });
    } else {
        $("#output2").html( "" );
    }
}

Answer 1

您可以在“城市/州选择”部分尝试selectize.js 。