html5 – jQuery改变另一个

$(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上注册“change”事件.
>当触发更改时,我调用Ajax请求到位置“/ listCities”
>我假设使用“GET”方法调用此位置
>我传递当前选中的状态 – 因此服务器将知道要列出的城市.
>如果Ajax通过错误,我将错误记录到控制台.
>如果Ajax成功,我将使用id“city”填充select,其中包含每个城市和标签的值的选项.

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

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

[{value：“AM”,label：“Amsterdam”},….]

您可能需要阅读的有关此示例的唯一内容是：

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

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