jQuery <select> 改变另一个 <select>

Question

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

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

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

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

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 最佳实践。

走过

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

我在编写代码时假设了以下几点

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

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

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

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

• JQuery Ajax Calls
• Best Practice To Populate A List With JQuery

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

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 服务，该服务器将返回该州的城市列表。

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