Question

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

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

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

我真的不确定如何实现这一点。有人可以告诉我吗？

Answer 1

它应该看起来像

$(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最佳做法。

走过

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

我在编写代码时假设了以下内容

您有一个期望状态的路线GET / listCities。
该路线的响应是一个JSON，其中包含每个城市的值和标签列表。像这样：

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

本例中您可能需要阅读的唯一内容是：

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

Answer 2

您必须按照以下步骤实现此目标：

首先在页面加载时通过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();
   });

});

Answer 3

非常简单 - 所有你需要做的就是有两个下拉菜单，一个有完整的状态列表，第二个（空）城市列表只包含一个空白禁用选项。

只要状态下拉列表触发change事件，您就会提取状态数据并通过AJAX调用将其发送到您的服务器或某个Web服务，该服务将返回该州的城市列表。

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

jQuery <select>更改另一个</select>

3 个答案:

走过