Question

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

它似乎工作正常，在选择状态时你可以看到如何填充选择并且你可以选择一个城市，但是，如果我修改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);
     }});
    }
 });
});

cities.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);
     }});
    }
 });
});

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

1 个答案: