html - jQuery 改变另一个

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

遍历

• 我在 select 上用 id state 注册了一个“改变”事件。
• 当更改被触发时，我调用一个 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

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