Question

我有一个包含多个 select 输入的表单，当我更改Date字段时，Ajax会重新加载这些输入。我希望在ajax重新加载 select 元素时保留当前选择，但是当我尝试获取它们时，ajax函数重新加载了 select 元素，我只得到“未定义”。

使用Ajax函数正确地重新加载 select 对象，但问题是我不能保留当前的选择。

我在 $（document）.on 上定义了jQuery change事件的“#myDate”字段的处理程序。

$(document).on('change', '#myDate', function(e){ 
    callAjaxSelectClient( $("#idCity").val(), $('#idClientOpt option:selected').val());
    callAjaxSelectLuggage( $("#idCity").val(), $('#luggageOpt option:selected').val());     
});

我告诉你ajax调用（例如，所有调用都类似）。我发送了两个参数， idCity 这是一个修复值，以及当前选择的 idClientOpt ，以便在ajax调用重写时保持选中它。

function callAjaxSelectClient( idCity, idClientOpt )    {

            var params = {
                    "idCity" : idCity,
                    "idClientOpt" : idClientOpt,
            };

            $.ajax({
                    async: true,
                    data:  params,
                    url:   'ajax/reload.client.php',
                    type:  'post',
                    success:  function (response) {
                            $("#div-client").html(response);
                    }
            });
    }

该函数调用“ajax / reload.client.php”，它写入html选择代码生成此代码：

<select name="idClient" id="idClient">
    <option value="1">Miguel Cervantes</option>
    <option value="2">William Shakespeare</option>
    <option value="3">George Orwell</option>
</select>

谢谢，干杯

Answer 1

试试这个：

bindAjaxSelectChange();

function callAjaxSelectClient( idCity, idClientOpt ) {
        var params = {
                "idCity" : idCity,
                "idClientOpt" : idClientOpt,
        };

        $.ajax({
                async: true,
                data:  params,
                url:   'ajax/reload.client.php',
                type:  'post',
                success:  function (response) {
                        $("#div-client").html(response);

                        bindAjaxSelectChange();
                }
        });
}

function bindAjaxSelectChange() {
        $(document).unbind('change').on('change', '#myDate', function(e) { 
                callAjaxSelectClient($("#idCity").val(), $('#idClientOpt option:selected').val());
                callAjaxSelectLuggage($("#idCity").val(), $('#luggageOpt option:selected').val());     
        });
}

基本上，现有事件处理程序不会遵守动态添加的元素，因此我们需要在每次更改后重新绑定事件。请注意＆＃34; .off（＆＃39;更改＆＃39;）＆＃34; - 我们先把旧处理程序移除。

Answer 2

要解决此问题，请保持隐藏状态在视图页面。

并仅从callAjaxSelectClient函数加载ooption。

OR

你需要用ajax / reload.client.php加载jquery.js

Answer 3

解决！代码是正确的，问题出在我的选择字段的ID上，我通过Ajax重新加载（＆＃34; idClient ＆＃34;而不是＆＃34; idClientOpt ＆＃34;），所以当我试图重新加载新选择的值时，我没有找到它..

谢谢你的时间。

Answer 4

您可以将表单数据保存到全局JSON变量并重新填充。

注意：您需要根据自己的情况进行适当的调整。

<script>
  var $data = [];

  function callAjaxSelectClient(idCity, idClientOpt) {
      var params = {
          "idCity": idCity,
          "idClientOpt": idClientOpt,
      };
      $data = $("form#form_id").serializeObject();
      $.ajax({
          async: true,
          data: params,
          url: 'ajax/reload.client.php',
          type: 'post',
          success: function(response) {
              $("#div-client").html(response);
              repopulateForm();
          }
      });
  }

  //Create JSON from form.
  $.fn.serializeObject = function() {
      var o = {};
      var a = this.serializeArray();
      $.each(a, function() {
          if(o[this.name]) {
              if(!o[this.name].push) {
                  o[this.name] = [o[this.name]];
              }
              o[this.name].push(this.value || '');
          } else {
              o[this.name] = this.value || '';
          }
      });
      return o;
  };

  //Populate form
  repopulateForm = function() {
      $.each($data, function(name, val) {
          var $el = $('[name="' + name + '"]'),
              type = $el.attr('type');
          switch(type) {
              case 'checkbox':
                  $el.attr('checked', 'checked');
                  break;
              case 'radio':
                  $el.filter('[value="' + val + '"]').attr('checked', 'checked');
                  break;
              default:
                  $el.val(val);
          }
      });
  }
</script>

在Ajax函数

4 个答案: