jQuery根據另一個選擇列表填充選擇列表

Question

我有2個選擇，一個用於州，一個用於城市，當用戶選擇州時，必須填充城市下拉列表。

看來工作正常，選擇州時可以看到如何填充選擇內容，還可以選擇城市。但是，如果我修改html的源代碼，則看不到任何代碼（RMB View源代碼），並且所選值不會發送到處理表單。

我的HTML

<select name="state" id="state" >
  <option value="1">State One</option>
  <option value="2">State Two</option>
  <option value="3">State Three</option>
</select>

<select name="city" id="city">
</select>

我的JQuery（從教程中學到並改編而成）

$(document).ready(function($) {
  var list_target_id = 'city';
  var list_select_id = 'state';
  var initial_target_html = '';
  $('#'+list_select_id).change(function(e) {
    var selectvalue = $(this).val();
    $('#'+list_target_id).html('<option value="">Loading...</option>');
    if (selectvalue == "") {
     $('#'+list_target_id).html(initial_target_html);
    } else {
     $.ajax({url: 'cities.php?idc='+selectvalue,
     success: function(output) {
       //alert(selectvalue);
       $('#'+list_target_id).html(output);
     }});
    }
 });
});

ities.php（這里我從數據庫讀取數據，但是，這是一個簡單的示例）

<?
   //these are the city values 
   echo '<option value="0">Select...</option>';
   echo '<option value="1">1</option>';
   echo '<option value="2">2</option>';
?>

有什么想法怎么了？ 我無法從城市獲得價值。

任何幫助...謝謝！

Answer 1

只需序列化並打開URL即可處理表單：

$(document).ready(function($) {

 $('#submit').click(function(evt){
  evt.preventDefault();
  window.location.href = 'processTheForm.php?'+$('#myForm').serialize();
 })

  var list_target_id = 'city';
  var list_select_id = 'state';
  var initial_target_html = '';
  $('#'+list_select_id).change(function(e) {
    var selectvalue = $(this).val();
    $('#'+list_target_id).html('<option value="">Loading...</option>');
    if (selectvalue == "") {
     $('#'+list_target_id).html(initial_target_html);
    } else {
     $.ajax({url: 'cities.php?idc='+selectvalue,
     success: function(output) {
       //alert(selectvalue);
       $('#'+list_target_id).html(output);
     }});
    }
 });
});