Question

我正在尝试使用下拉可靠选项做一个表单，问题是我可以只使用HTML，Javascript和Ajax，没有数据库，所以我必须直接用jquery填充选项，到目前为止这就是我的意思得到了，但是没有用，任何帮助都会很棒，谢谢你:)。

$(document).ready(function(){

    var countries =  [
           {
            "id": "1",
            "name": "Mexico"
           },
           {
            "id": "2",
            "name": "USA"
           },
           {
            "id": "3",
            "name": "Canada"
           }
           ]

   var states = {
        '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"
        }]
    };
   



   $("#country").on('click',function() {
      var pais = $(this).val();
      $("#country").find("option").remove();
      $(countries).each(function (i) { 
        $("#country").append('<option id="'+countries[i].id+'">'+countries[i].name+"</option>");
    });
       console.log(pais);
   });



   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]);
   });
    });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><form action="" method=""  enctype="application/json">
    <br/>Nombre: <input type="text" />
    <br/>Edad:   <input type="text" />
    <br/>Pais:
    <select name="country" id="country">
      <option value="">Selecciona tu pais</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

首先，您有2个具有相同名称states的变量，并且您的代码不符合您的JSON格式。我已修复的代码下面。看看。

$(document).ready(function() {

  var countries = [{
    "id": "1",
    "name": "Mexico"
  }, {
    "id": "2",
    "name": "USA"
  }, {
    "id": "3",
    "name": "Canada"
  }]

  var states = {
    '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 cities = {
    '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"
    }]
  };


  $(countries).each(function(i) {
    $("#country").append('<option id="' + countries[i].id + '">' + countries[i].name + "</option>");
  });
  $("#country").on('change', function() {
    list(states[$("#country").val().toLowerCase()]);
  });


  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 (cities[state] == undefined) {
      return $("#child").text('Selecciona tu ciudad');
    }
    array_list = cities[state.toLowerCase()];
    $("#child").html("");
    $(cities[state]).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>
  <br/>Nombre:
  <input type="text" />
  <br/>Edad:
  <input type="text" />
  <br/>Pais:
  <select name="country" id="country">
    <option value="">Selecciona tu pais</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>

希望有所帮助：）

仅使用AJAX Jquery从数组填充依赖的下拉列表

1 个答案: