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

【问题标题】：dropdown field is not correctly when page is reload重新加载页面时下拉字段不正确
【发布时间】：2016-01-13 03:45:11
【问题描述】：

我有一个包含 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>');还没有调用。为什么我失去了 city 字段的值“Sydney”？

【问题讨论】：

显示完整代码

标签： javascript jquery

【解决方案1】：

填充城市的第一部分很简单......只需在页面加载时和绑定事件处理程序后触发国家/地区选择上的更改事件

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

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

然后根据您的数据源设置城市的值

【讨论】：

【解决方案2】：

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

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/

【讨论】：