Question

我正在尝试使用jquery / javascrip和HTML进行国家，州和城市的动态依赖下拉选择菜单，但是当选择国家/地区时，选项直接进入城市，我已经看过很多教程，问题是我不想使用数据库，我想直接创建对象，如果有人可以帮助我，这是我的代码：

  $(document).ready(function(){
        var countries = {
        'mexico': [{
            display: "Ciudad de Mexico",
            value: "mx-city"
        }, {
            display: "Jalisco",
            value: "jalisco"
        }],
            'usa': [{
            display: "Texas",
            value: "texas"
        }, {
            display: "Ohio",
            value: "ohio"
        }],
            'canada': [{
            display: "Montreal",
            value: "montreal"
        }, {
            display: "Toronto",
            value: "toronto"
        }]
    };
     

     var states = {
        'mx-city': [{
            display: "Benito Juarez",
            value: "benito-juarez"
        }, {
            display: "Cuauhtemoc",
            value: "cuauhtemoc"
        }],
            'jalisco': [{
            display: "Zapopan",
            value: "zapopan"
        }, {
            display: "Guadalajara",
            value: "Guadalajara"
        }],
            'texas': [{
            display: "San Antonio",
            value: "san-antonio"
        }, {
            display: "Austin",
            value: "austin"
        }],
           'ohio': [{
            display: "Colombus",
            value: "colombus"
        }, {
            display: "Cleveland",
            value: "cleveland"
        }],
            'montreal': [{
            display: "Quebec",
            value: "Quebec"
        }, {
            display: "Vermont",
            value: "vermont"
        }],
            'toronto': [{
            display: "Ontario",
            value: "ontario"
        }, {
            display: "York",
            value: "york"
        }]
    };
   



           $("#parent_selection").change(function() {
            var parent = $(this).val();
             if (countries[parent] == undefined) {
            return $("#child_selection").html('Selecciona tu Estado');
           }
            list(countries[parent]);
  
           });



            function list(array_list){
              $("#child_selection").html(""); 
                 $(array_list).each(function (i) { 
                 $("#child_selection").append('<option value="'+array_list[i].value+'">'+array_list[i].display+"</option>");
           });
            }
   


            $('#child_selection').change(function() {
               var state = $(this).val();
   
               if (states[state] == undefined) {
               return $("#child").text('Selecciona tu ciudad');
             }
                list(states[state]);
              });

                  function list(array_list){
                    $("#child").html(""); 
                    $(array_list).each(function (i) { 
                     $("#child").append('<option value="'+array_list[i].value+'">'+array_list[i].display+"</option>");
           });
            }
           });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method=""  enctype="application/json">
    <br/>Nombre: <input type="text" />
    <br/>Edad:   <input type="text" />
    <br/>Pais:
    <select name="parent_selection" id="parent_selection">
      <option value="">Selecciona tu pais</option>
      <option value="mexico">Mexico</option>
      <option value="usa">USA</option>
      <option value="canada">Canada</option>
    </select>
    <br />Estado:
    <select name="child_selection" id="child_selection">
      <option value="">Selecciona tu estado</option>
    </select>
    <br/>Ciudad:
    <select name="child" id="child">
      <option value="">Selecciona tu ciudad</option>
    </select>
    
    <input type="submit" value="Submit" />
  </form>

Answer 1

我发现的第一个错误是一个名为＆＃34; list＆＃34;这个名字是保留的。 - 所以改变函数的名称就像...... getList（）。

第二个错误是你要调用这个对象的值。

这会加载状态下拉列表：

   function getList(listCountries) {
       $("#child_selection").html(""); 
         $(listCountries).each(function (i) { 
           var arrayStates = states[listCountries[i]['value']];
           $.each(arrayStates,function(i){
             $("#child_selection").append('<option value="'+arrayStates[i]['value']+'">'+arrayStates[i]['display']);
           }); 
        });
    }

这会加载一个国家的城市：

$('#child_selection').change(function() {
           var state = $(this).val();       
           var parent = $("#parent_selection").val();

             if (countries[parent] == undefined) {
               //DO SOMETHING
             } else {
               var listCountries = countries[parent];
                $(listCountries).each(function (i) { 
                  var arrayStates = states[listCountries[i]['value']];
                   $.each(arrayStates,function(i){
                     if ( state === arrayStates[i]['value'] ) {
                       $("#child").html("");
                       $("#child").append('<option value="'+listCountries[i]['value']+'">'+listCountries[i]['display']+'</option>');
                     }
                   });
                });
             }
          });

这是完全功能的代码，在声明状态后添加它，检查并享受它：）

$("#parent_selection").change(function() {
        var parent = $(this).val(); 
         if (countries[parent] == undefined) {
            return $("#child_selection").html('Selecciona tu Estado');
       }

        getList(countries[parent]);

       });

        function getList(listCountries) {
           $("#child_selection").html(""); 
             $(listCountries).each(function (i) { 
               var arrayStates = states[listCountries[i]['value']];
               $.each(arrayStates,function(i){
                 $("#child_selection").append('<option value="'+arrayStates[i]['value']+'">'+arrayStates[i]['display']+'</option>');
               }); 
            });
        }



        $('#child_selection').change(function() {
           var state = $(this).val();       
           var parent = $("#parent_selection").val();

             if (countries[parent] == undefined) {
               //DO SOMETHING
             } else {
               var listCountries = countries[parent];
                $(listCountries).each(function (i) { 
                  var arrayStates = states[listCountries[i]['value']];
                   $.each(arrayStates,function(i){
                     if ( state === arrayStates[i]['value'] ) {
                       $("#child").html("");
                       $("#child").append('<option value="'+listCountries[i]['value']+'">'+listCountries[i]['display']+'</option>');
                     }
                   });
                });
             }
          });

我的最后一个提示：阅读有关如何使用ajax执行此操作的内容将比使用此方法更好。

动态相关下拉菜单Jquery没有数据库

1 个答案: