Question

我正在使用Jquery Selectable插件在php中做一个小软件。我需要用我所有可选择的ajax保存数据并将其发送到我的PHP脚本，最后打印我的PHP脚本的结果。这是我的HTML：

<h2>Days</h2>
<ol id="one">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
</ol>
<h2>Months</h2>
<ol id="two">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
</ol>
<h2>Years</h2>
<ol id="three">
  <li class="ui-state-default">2010</li>
</ol>
<p id="result"></p>

这是我的JQuery代码：

$(function() {
  $("#one").selectable({
    stop: function() {
      var Days = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Days += ",";
        }
        Days += $(this).text();
      });
      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { days: Days }
      });
    }
  });
  $("#two").selectable({
    stop: function() {
      var Months = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Months += ",";
        }
        Months += $(this).text();
      });
      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { months: Months }
      });
    }
  });
  $("#three").selectable({
    stop: function() {
      var Years = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Years += ",";
        }
        Years += $(this).text();
      });
      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { years: Years }
      });
    }
  });
});

此代码每次选择一个项目时都会发送帖子请求，但我还需要发送其他可选择的当前值，而不仅仅是一个。我需要帮助=）抱歉我的英语不好。

EDIT 我也发现了这个解决方案。

$(function() {
  var days;
  var months;
  var years;
  $("#one").selectable({
    stop: function() {
      var Days = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Days += ",";
        }
        Days += $(this).text();
      });
      days = Days;
      Send(days, months, years);
    }
  });

  $("#two").selectable({
    ...
  });

  $("#three").selectable({
    ...
  });

  function Send (days, months, years) {
    jQuery.post('elabora.php', { one: days, two: months, three: years }, Stamp);
  }
  function Stamp (data){
    jQuery(function(){
      jQuery('#result').html(data);
    })
  }
}

Answer 1

试试这个

function makeAjaxCall() {
      var Days = "";
      $( ".ui-selected", $("#one")).each(function(i) {
        if(i != 0) {
          Days += ",";
        }
        Days += $(this).text();
      });

       var Months = "";
      $( ".ui-selected", $("#two")).each(function(i) {
        if(i != 0) {
          Months += ",";
        }
        Months += $(this).text();
      });

     var Years = "";
      $( ".ui-selected", $("#three")).each(function(i) {
        if(i != 0) {
          Years += ",";
        }
        Years += $(this).text();
      });

      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { days: Days,months: Months, years: Years }
      });
}


$(function() {
      $("#one").selectable({
        stop: makeAjaxCall
      });
      $("#two").selectable({
        stop: makeAjaxCall
      });
      $("#three").selectable({
        stop:makeAjaxCall
      });
});

Multi JQuery UI可选

1 个答案: