3

在使用谷歌时，这个网站总是会为我的问题提供答案，但我一直在努力寻找答案，所以我想我会注册，打个招呼，然后问:)

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

然后我有一个带有按钮的表单，它将使用 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);
                   });

                });
            }
        });

在上面的位中，我从单元格中获取 period_id，该单元格取自其他一些 php。如果选择单个单元格而不是多个单元格，它会按预期工作。如果需要任何其他代码来帮助回答这个问题，请告诉我

谢谢

编辑 作为补充，这是我希望实现的（为了更清楚地理解我的意思）。用户看到时间表网格。他们可以选择一个单元格并选择书籍，这将通过 POST 传递他们选择的时间和日期数组以转到 booking.php。他们还可以选择多个单元格，然后单击 book，然后将每个单元格作为数组传递以进行预订，因此 php 可以循环遍历所有单元格数组并使用 jquery 可选返回的房间/天 ID 预订多个单元格。

4

3 回答 3

2

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

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" />
于 2012-06-05T06:31:17.140 回答
0 
<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] => 预订[键]。

于 2012-06-01T10:26:52.153 回答
0

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

var count = 0

就在之前

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

然后每个字段都有这个

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

然后在循环结束时

count = count + 1

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

于 2012-06-21T08:51:25.590 回答