Question

我有一个包含2个国家和城市的产品页面表单。 https://jsfiddle.net/pc6a8m06/2/

选择国家/地区将更改城市列表。

当我提交表单时，国家（例如：Úc）和城市（例如悉尼）数据将被发送到服务器。

但是，当我重新打开产品页面表单进行编辑时，只能正确显示国家/地区名称（Úc）。城市字段设置为默认值。

有没有办法修复我的javascript代码，以便城市字段显示“悉尼”而不是空选（由于dep.empty().append('<option>-Chọn TP-</option>');）
当产品页面表单加载时，我还没有点击选择国家/地区，这意味着dep.empty().append('<option>-Chọn TP-</option>');尚未调用。为什么我失去了城市领域的“悉尼”价值？

Answer 1

填充城市的第一部分非常简单......只需在页面加载时以及绑定事件处理程序后触发国家选择的更改事件

$('[name="departure_country[]"]').change(function(e){
      // code to populate cities  here

// now trigger the change
}).change();

然后根据您的数据源

设置城市的值

Answer 2

每次发布表单数据时，您的客户端状态（jquery）都会重置。为了在帖子之后设置它，你需要再次执行相同的脚本，而不是等待更改。

var cities = {

  "Úc": [{
    display: "Canberra",
    value: "Canberra"
  }, {
    display: "Sydney",
    value: "Sydney"
  }, {
    display: "Melbourne",
    value: "Melbourne"
  }, {
    display: "Perth",
    value: "Perth"
  }, {
    display: "Gold Coast ",
    value: "Gold-Coast"
  }],

  "Pháp": [{
    display: "Paris",
    value: "Paris"
  }, {
    display: "Avignon",
    value: "Avignon"
  }, {
    display: "Strasbourg",
    value: "Strasbourg"
  }, {
    display: "Nice",
    value: "Nice"
  }],

  "Nhật Bản": [{
    display: "Tokyo",
    value: "Tokyo"
  }, {
    display: "Osaka",
    value: "Osaka"
  }]
};

(function($) {

  $('[name="departure_country[]"]').change(function(){
        var $this = this;
        SetCity($this);
    });

  function SetCity(obj)
  {    
      var country = $(obj).val();

      var clist = cities[country];

      var dep = $('[name="departure[]"]');

      dep.empty().append('<option>--select--</option>');

      $(clist).each(
        function(i, v) {
          $('<option>').text(v.display).val(v.value).appendTo(dep);
        }
      );       
  }

  SetCity();


})(jQuery);

工作示例：https://jsfiddle.net/DinoMyte/pc6a8m06/4/

重新加载页面时，下拉字段不正确

2 个答案: