[jQuery] [Help]: A function that switches input box with select, and vice versa

[Proud to be Orient]

Hello everyone.

I'm trying to manipulate a country/state selector whereby I have a
mapped array of country=> states  in the form, and when a change()
occurs in the country selector, that if state array is empty, an
<input name="state" type="text"> will be shown, or a <select
name="state"> will be shown..

So my logic is whenever an onchange occurs, that I destroy and
recreate the "state" form element.

I am very new to developing my own jquery logics (used to just modify
existing plugins), so I can be wrong with even the most fundemential
basics of chains as well.


The logic of the script goes to something similar to this:

<script type="text/javascript">
var country = new Array();

country['CA'] = "Ontario";
country['GB'] = "Whales";
country['US'] = "Alabama";


$(document).ready(function(){
    $("#country").change(function()
    {
        var country_index

        country_index = $("#country").val();

        $("#state").empty();

        if (country_index > 0)
            $("#state").append(country[country_index]);
    });
});
</script>

I hope that you can help enlighten me on this part. And I'm also not
familiar on how to auto populate a select elements with my states
arrays as well..

Urban