3

我正在尝试使用 jQuery.change()创建两个<select>元素，第一个元素<select id="state">用于生成州列表，第二个<select id="city">用于生成城市列表。

州和城市的值不会被硬编码，而是从 Web 服务传递的值生成。

要生成的选项列表应该像这样工作：如果用户从<select id="state">选定的值中选择状态，则将传递给 Web 服务以检索列表以生成<select id="city">城市。

我真的不确定如何实现这一点。谁能给我建议？

4

3 回答 3

4

它应该看起来像

$(function(){
// populate the states list from Ajax 


    $.ajax( {
       url:"/listStates",
       type:"GET",
       success:function( data ) { 
            var statesList = data;
            if ( typeof(data) == "string" ){
                 statesList = JSON.parse(data);
            }
            $.each( statesList, function( index, state ){
                     $("#state").append($("<option></option>",{value:state.value, text:state.label});
                });
       },
       error:function( result ) { 
            console.log(["error getting states",result]);
       }
    });

    // register on state list change
    $("#state").change( function(){
            // on change dispatch an AJAX request for cities and populate cities 
        $.ajax({ url : "/listCities",
            data : {"state": $("#state").val() },
            type:'GET',
            success:function( data ) {
                var citiesList = data; // assuming list object
                if ( typeof(data) == "string"){ // but if string
                    citiesList = JSON.parse( data );
                } 
                            $("#city").empty();
                $.each(citiesList, function(index,city){
                    $("#city").append($("<option></option>", {"value":city.value, "text":city.label}));
                }
            },
            error:function( result ){ console.log(["error", result]); }

    })
});

这可以让你开始，但是我没有在这里遵循 lint 最佳实践。

走过

  • 我在带有 id 状态的 select 上注册了一个“更改”事件。
  • 如果触发更改，我会调用 Ajax 请求到位置“/listCities”
  • 我假设这个位置是用“GET”方法调用的
  • 我传递当前选择的状态 - 所以服务器将知道要列出哪些城市。
  • 如果 Ajax 通过错误，我将错误记录到控制台。
  • 如果 Ajax 成功，我会使用包含每个城市的值和标签的选项填充 id 为“city”的选择。

我在编写代码时假设了以下事情

  • 您有一个需要状态的路线 GET /listCities。

  • 该路由的响应是一个 JSON，其中包含每个城市的值和标签列表。像这样的东西：

    [{ value : "AM" , label : "Amsterdam" }, .... ]

对于此示例，您可能需要阅读的唯一内容是：

如果您有任何问题，请评论我的回复，我将很乐意解释/添加/修改

于 2013-02-02T11:55:15.763 回答
3

你必须按照一些步骤来实现这一点：

  • 首先，当页面加载通过 ajax 填充第一个国家/地区列表时（我的假设）
  • 然后使用国家/地区列表创建一个.change()事件
  • 这将发送请求并根据所选国家/地区返回状态列表响应。

你可以尝试这样测试：

$(function(){
   $.ajax({
      url:your url,
      type: 'post',
      dataType: 'json', // or your choice of returned data
      success: function(data){
          $.each(data, function(i, v){
             $('<option value="'+v.name+'">'+v.text+'</option>').appendTo('#country');
          });
      }
   });

   $('#country').change(function(){
       $.ajax({
         url:your url,
         type: 'post',
         dataType: 'json', // or your choice of returned data
         success: function(states){
             $.each(states, function(i, stt){
                $('<option value="'+stt.name+'">'+stt.text+'</option>').appendTo('#states');
             });
         }
      });
      $('#states').empty();
   });

});
于 2013-02-02T11:59:22.707 回答
0

非常简单 - 您所要做的就是拥有两个下拉列表，一个包含完整的州列表，第二个（空）城市列表将仅包含一个空白的禁用选项。

一旦您的州下拉菜单触发change事件，您就提取州数据并通过 AJAX 调用将其发送到您的服务器或某些 Web 服务，该服务将返回该州的城市列表。

然后，您将使用返回的城市值填充第二个下拉列表。

于 2013-02-02T11:46:11.593 回答