Question

这个网站总是在使用谷歌时提出我的问题的答案，但我很难找到答案，以为我会注册，打招呼并问：）

我有一个时间表（使用html表），每个单元格都被标记为可选择jquery-ui selectable。

然后我有一个带按钮的表单，它将使用POST来预订所选的单元格。

<form  method="get" action="../test" id="add">
                    <button type="submit" class="btn btn-primary">Book selected period(s)</button>
                </form>

在可选择的序列化示例中，它显示它选择数字正常。但当我按下按钮（使用GET进行测试）时，似乎得到了错误的数字。例如，如果我选择单元格1并单击书籍，则会显示 GET中的cell_id = 1，但是如果我选择单元格1和单元格2，它会循环计数它们，所以GET显示 cell_id = 1，cell_id = 1，cell_id = 2（所以计数1，然后是1 + 1而不是1 + 1）

这意味着如果我选择5个细胞，我得到15个结果（1 + 2 + 3 + 4 + 5）而不是5个。有没有解决的办法。这是我到目前为止在javascript中所拥有的：

         $( "#selectable" ).selectable({
         filter: ".selectable",
            stop: function() {
                $( ".ui-selected", this ).each(function() {
                    var data = $(this).data();
                    $(data).each(function(key, value){
                        var period_id = document.createElement("input");
                        period_id.setAttribute("type", "hidden");
                        period_id.setAttribute("name", "booking[1][period]");
                        period_id.setAttribute("value", data.period);
                        document.getElementById("add").appendChild(period_id);
                   });

                });
            }
        });

在上面的位中，我从一些其他php获取的单元格中获取了period_id。如果选择单个单元格不是多个，它就可以正常工作。如果需要任何其他代码来帮助回答这个问题，请告诉我

感谢

修改作为补充，这是我希望实现的目标（为了更清楚地理解我的意思）。用户看时间表网格。他们可以选择一个单元格并选择book，它将通过POST传递一个他们选择的时段和日期的数组，以进入booking.php。他们还可以选择多个单元格，然后单击book，然后将每个单元格作为数组传递给预订，这样php就可以循环遍历所有单元格阵列，并使用jquery selectable返回的房间/天id来预订多个单元格。

Answer 1

这是我使用隐藏输入元素提出的解决方案。

<强> Jquery的

                //Activities Selectable
            $(".selectable-activities").selectable(
                {filter: "li"},
            {
                stop: function() 
                    {//places selected in input box
                        var text = "";
                        $( "#activities-input" ).val(text);
                        $( ".ui-selected", this ).each(function() {
                            var index = $(this).attr("id");
                            text = text + " " + index;
                            $( "#activities-input" ).val(text);
                        });
                    }


            },
            //Clears input box on reload
            {   create: function() {$( "#activities-input" ).val("");}}
            );

<强> HTML

                <fieldset>
                <legend>Environmental</legend>
                <ol class="selectable selectable-activities">
                    <li class="ui-state-default" id="LNTS" >"leave No Trace" Skills</li>
                    <li class="ui-state-default" id="Aqua" >Aquatic Ecology / Study</li>
                    <li class="ui-state-default" id="OutSkill" >Camping Skills / Outdoor Living</li>
                    <li class="ui-state-default" id="Cons" >Conservation</li>
                    <li class="ui-state-default" id="Ento" >Entomology</li>
                    <li class="ui-state-default" id="Farm" >Farming / Gardening</li>
                    <li class="ui-state-default" id="Fores" >Forest Ecology</li>
                    <li class="ui-state-default" id="Geol" >Geology (Earth)</li>
                    <li class="ui-state-default" id="Herp" >Herpetology (amphibians & Reptiles)</li>
                    <li class="ui-state-default" id="Mari" >Marine Science</li>
                    <li class="ui-state-default" id="Natur" >Nature Explosure</li>
                    <li class="ui-state-default" id="Oni" >Ornithology (Birds)</li>
                    <li class="ui-state-default" id="Vet" >Veterinary Science</li>
                    <li class="ui-state-default" id="WildLi" >Wildllife Ecology</li>
                    <li class="ui-state-default" id="Zoo" >Zoology (Animals)</li>
                </ol>
                </fieldset>

                <!--Here is the hidden input-->
                <input type="hidden" name="a" id="activities-input" />

Answer 2

<pre>
     $( "#selectable" ).selectable({
     filter: ".selectable",
        stop: function() {
            $( ".ui-selected", this ).each(function() {
                var data = $(this).data();
                $(data).each(function(key, value){
                    var period_id = document.createElement("input");
                    period_id.setAttribute("type", "hidden");
                    period_id.setAttribute("name", "booking["+key+"][period]");
                    period_id.setAttribute("value", data.period);
                    document.getElementById("add").appendChild(period_id);
               });

            });
        }
    });

预订[1] =＆gt;预订[键]。

Answer 3

我最终解决这个问题的方法是添加

var count = 0

之前

$( ".ui-selected", this ).each(function() {

然后每个字段都有这个

date_id.setAttribute("name", "booking["+count+"][date]");

然后在循环结束时才有

count = count + 1

为我工作，但感谢大家的建议

jQuery-UI可选择输出数组到隐藏表单

3 个答案: