JQuery 根据另一个选择列表填充选择列表答案

【问题标题】：JQuery to populate select list based on another select listJQuery 根据另一个选择列表填充选择列表
【发布时间】：2015-02-13 01:48:22
【问题描述】：

我有 2 个选择，一个用于州，一个用于城市，当用户选择州时，必须填充城市下拉列表。

似乎工作正常，选择状态时，您可以看到选择填充的方式，并且可以选择一个城市，但是，如果我修改了HTML的源代码，我看不到任何代码（RMB视图源代码）并且选择的值不会发送到处理表单。

我的 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);
     }});
    }
 });
});

city.php（这里我从数据库中读取数据，但是这里是一个简单的例子）

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

任何想法有什么问题吗？我无法从城市中获取值。

任何帮助...谢谢！

【问题讨论】：

输出的值是多少？
同一个htlm，没有变化。
我为您的场景创建了一个fiddle。我正在使用$('#myForm').serialize() 来序列化表单。它似乎工作。如果您的情况不是这样-我想看看您是如何发布表格的？
@amithk 不走运，使用序列化在页面中显示正确的值，但如果我处理表单，则缺少值，我正在发布表单，所有值都在那里，但城市除外。
@amitthk 我缺少的是使用序列化并打开 url 来处理表单。感谢您的帮助！

标签： javascript jquery ajax

【解决方案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);
     }});
    }
 });
});

【讨论】：