Jquery UI可选：动态定义多个可选对象

Question

我真的需要一些帮助：我正在开发购物车。每当新产品附加到购物车时，它就变成一个按钮。此按钮（产品）用于为每个产品添加一些修饰符。按钮定义如下所示：

EmployeController employe

每当按下每个产品按钮时，都会打开一个JQUERY UI对话框窗口，其中包含一个JQUERY UI SELECTABLE对象：

        var productAdded = $('<tr class="product" data-real_id = "'+ id +'" data-id_modal="'+ mod_id +'"><td class="product_name2"><button href="#0" class="button2" style="background-color:#00a65a;" data-comment=""  data-modifiers="" data-span_mod = "" data-real_id = "'+ id +'" data-id_modall="'+ mod_id +'" id = "'+ comment_id +'">' + product_name + '</button></td><td class="quantity"><span class="select"><select id="cd-product-'+ id +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></td><td class="price">' + product_price + '</td><td><a href="#0" class="delete-item"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td></tr>');

如下所示，使用AJAZ + PHP从mysql数据库中提取产品的修饰符：

<div class="modal fade" id="modal">    
                                                    <div class="modal-dialog">      
                                                      <div class="modal-content">
                                                      <div class="modal-header"></div>
                                                      <div class="modal-body" style="margin-top:5px;">

                                                        <div style="width:100%;  float:left;">
                                                            <label for="modifier">Τροποποιητές: </label>
                                                            <span id="select-result" data-modifiers_span=""></span>
                                                            <ol id="selectable" class="txt-modifiers">
                                                              <!-- INSERTED BY JQUERY DYNAMICALLY PER PRODUCT -->
                                                            </ol>
                                                        </div>

                                                            <label for="comment">Σχόλιο: </label>
                                                            <textarea rows="4" cols="50" name="comment" id="comment" value="" class="form-control txt-comment" style="vertical-align: top;"></textarea>

                                                      </div>
                                                      <div class="modal-footer" style="margin-top:10px;">
                                                        <button class="btn btn-success btn-save" data-id="" data-id_modall="">Αποθήκευση</button>
                                                        <button class="btn btn-default" data-dismiss="modal">Κλείσιμο</button>
                                                      </div>
                                                    </div>
                                                    </div>
                                                  </div>

可选对象：

$(document).on('click touchstart','.button2',function(e){
                      e.preventDefault();

                      var id        = $(this).attr('id'); //Get element id
                      var real_id   = $(this).attr('data-real_id');
                      var comment   = $(this).attr('data-comment'); //Get comment
                      var modifiers = $(this).attr('data-modifiers'); //Get modifiers
                      var teeee     = $(this).attr('data-id_modall');

                      $('#modal .txt-comment').val(comment);
                      $('#modal .btn-save').attr('data-id',id);
                      $('#modal .btn-save').attr('data-id_modall',teeee);

                      //alert(modifiers);
                      if (modifiers.length == 0)
                      {
                        $("#selectable").html('<img src="images/ajax-loader.gif" />');
                        var request   = $.ajax({
                            url:          'http://127.0.0.1:8080/Food%20Ball/backup/FoodBall%20Site%20form_dt_2/Food%20Ball%20Site/get_item_modifiers.php?item_id=' + real_id,
                            cache:        false,
                            dataType:     'json',
                            contentType:  'application/json; charset=utf-8',
                            type:         'get',
                            success: function(data) {
                            if( data.result != 'Not'){  
                                $("#selectable").html(data.options);
                                $('#modal .txt-modifiers').val(data.options);
                            }
                            else{ $("#selectable").html('Δεν υπάρχουν!');
                                  $('#modal .txt-modifiers').val('Δεν υπάρχουν!'); }
                           }
                        });
                      }
                      else { $('#modal .txt-modifiers').val(modifiers); $("#selectable").html(modifiers);}
                      $('#modal').dialog('open');


                    });

最后＆＃34; Save＆＃34;每个对话框模态窗口的按钮：

$(function () {
                         $('#selectable').on('touchstart mousedown', function(e) {e.metaKey = true;})
                            .selectable({
                                  selected: function(event, ui) {
                                    var result = $( "#select-result").empty();
                                    $( ".ui-selected", this ).each(function() {
                                        result.append($(this).attr('data-product_modifier') + ', ');
                                    });
                                  },                                  
                                  unselected: function(event, ui){
                                      var result = $( "#select-result");
                                     $( ".ui-unselected", this ).each(function() {
                                        result.remove($(this).attr('data-product_modifier') + ', ');
                                        });
                                  }
                                }); 
                    });

我的问题是，如果我向购物车添加多个产品，则所有产品都会显示所选的修饰符。如何动态定义多个可选对象并保存每个产品的选定修饰符？

如果有人可以提供帮助，我将非常感激

谢谢