多 JQuery UI 可选答案

【问题标题】：Multi JQuery UI Selectable多 JQuery UI 可选
【发布时间】：2013-05-15 13:32:55
【问题描述】：

我正在用 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 }
      });
    }
  });
});

每次我选择一个项目时，此代码都会发送发布请求，但我还需要发送具有当前值的其他可选择项，而不仅仅是一个。我需要帮助 =) 对不起我的英语不好。

编辑我也找到了这个解决方案。

$(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);
    })
  }
}

【问题讨论】：

标签： jquery user-interface selectable

【解决方案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
      });
});

【讨论】：

非常感谢，我已经解决了我的问题，我也测试了你的解决方案，它工作正常。 ;) 祝你有美好的一天