[jQuery] [Help]: A function that switches input box with select, and vice versa
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