jQuery< select>更改另一个< select> [英] jQuery <select> Changes Another <select>

问题描述

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

I am using trying to use jQuery .change() to create two <select> elements whereby the first <select id="state"> is for generating a list of states and the second <select id="city"> is to generate a list of cities.

州和城市的值将不会硬编码，而是通过Web服务传递的值生成.

The values of states and cities will not be hard-coded but generated from values pass from web services.

要生成的选项列表应按以下方式工作:如果用户从<select id="state">中选择州，则所选值将传递到Web服务以检索列表以生成城市的<select id="city">.

The list of options to be generated is supposed to work like this: if user selects state from <select id="state"> the selected value will be pass to a web service to retrieve the list to generate the <select id="city"> for cities.

我真的不确定如何实现此目标.谁能告诉我吗?

I'm really not sure how to implement this. Can anyone please advise me?

推荐答案

它应该看起来像

$(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]); }

    })
});

这可以帮助您入门，但是在这里我没有遵循皮棉最佳实践.

This can get you started however I did not follow lint best practices here.

• 我注册了具有ID状态的select的更改"事件.
• 当更改触发时，我调用Ajax请求到位置"/listCities"
• 我假定使用"GET"方法调用此位置
• 我传递了当前选定的状态-服务器将知道要列出的城市.
• 如果Ajax遇到错误，我会将错误记录到控制台.
• 如果Ajax成功，我将使用包含每个城市的值和标签的选项填充ID为"city"的选择.

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

I assumed the following things while writing the code

• 您有一条路线GET/listCities，该路线需要一个州.

• 该路线的响应是一个JSON，其中包含每个城市的值和标签的列表.像这样:

• You have a route GET /listCities that expects a state.

• The response from that route is a JSON containing a list of values and labels for each city. Something like this :

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

此示例可能需要阅读的唯一内容是:

The only things you may need to read about for this example are :

• JQuery Ajax调用
• 使用JQuery填充列表的最佳做法

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

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

If you have any questions, please comment my response, I will be happy to explain/add/modify

这篇关于jQuery< select>更改另一个< select>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！