Select box populated dynamically with AJAX doesn't post on form submission

This is my first attempt at chaining select boxes in a web form using ajax and I I'm obvi开发者_运维知识库ously missing something. I'm simply at a loss for what that is, exactly. Here is my issue:

A user selects a Country from one select box and an ajax request is made and options (containing names of States and Territories) are returned to a select box below. While the options are returned into the form select field, the user-selected option is NOT sent when the form is submitted.

Here is the code I've cooked up:

<script type="text/javascript">
    jQuery(document).ready(function($){
      $("select#state").attr("disabled","disabled");
      $("select#country").change(function(){
        $("select#state").attr("disabled","disabled");
        $("select#state").html("<option>Loading States...</option>");
        var id = $("select#country option:selected").attr('value');
          $.post("http://example.com/terms.php", {id:id}, function(data){
            $("select#state").removeAttr("disabled");
            $("select#state").html(data);
          });
        });
    });
</script>

You can see the live example here (see the Country/State section):

http://shredtopia.com/add/

Any ideas what is needed to get this working?

As far i can see, the user input is sent

input_32    79
input_29    alberta

Being 79 the country canada and alberta the state.

<select tabindex="11" class="medium gfield_select" id="input_1_32" name="input_32"></select>
<select tabindex="12" class="medium gfield_select" id="input_1_29" name="input_29" disabled=""></select>

Maybe i misunderstood the issue?

Try .live( eventType,handler )

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

http://api.jquery.com/live/

Add to your code and try it~

$('select#state').live('change', function() {
   var id = $("select#state option:selected").attr('value');
   alert(id);
});

Or try this:

add a hidden in form:

<input type="hidden" id="hiddenValue">

alter your select#state like this:

<select onchange='innerValue(this.options[this.options.selectedIndex].value)'></select>

and create a javascript function

function innerValue(value){
        $("#hiddenValue").val(value)
     }

then,click submitbutton,$("#hiddenValue").val() is you need

$("#submitbutton").click(function(){
            alert($("#hiddenValue").val())
        })

but,I think this is not the best solution...