基于序列化哈希的jQuery显示隐藏选择菜单答案

【问题标题】：jQuery show hide select menus based on serialized hash基于序列化哈希的jQuery显示隐藏选择菜单
【发布时间】：2017-06-16 12:39:14
【问题描述】：

我正在尝试通过使用 ajax 和序列化哈希来隐藏选择菜单。昨晚我让这个系统正常工作，但我将#selector 从表单更改为 div，然后它突然停止运行。我不得不扩大发布附加数据的表格，并且不想一次序列化所有数据，因为这会给系统带来额外的压力。

该页面在某种程度上按预期工作。它显示了第一个选择，允许我选择一个选项，我可以看到 AJAX 发布但哈希值是空的，我认为这破坏了上面的 PHP。我无法弄清楚为什么哈希发布为空。我认为它没有从选择中获得价值，但我不知道为什么..

如果可能的话，你能指出我哪里出错了吗？

<section id="add">
<div class="container">
    <form method="post">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
            </div>
            <div id="selector">
                <div class="panel-body">
                    <div class="col-md-6">
                        <select class="form-control box1" name="box1"></select>
                        <input name="box1hash" class="box1hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box2" name="box2"></select>
                        <input name="box2hash" class="box2hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box3" name="box3"></select>
                        <input name="box3hash" class="box3hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box4" name="box4"></select>
                        <input name="box4hash" class="box4hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box5" name="box5"></select>
                        <input name="box5hash" class="box5hash" type="hidden" />
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
            </div>
            <div class="panel-body">
                <input name="event_name" type="text" class="form-control" />

            </div>
        </div>
        <input type="submit"/>
    </form>
</div>

        $(document).on('change', '#selector', function(e) {
            ajax_post(this);
        });

        ajax_post();

    })(jQuery);

    function show_hide_select(select){
        if ($(select).find('option').length < 1) {
            $(select).hide();
        } else {
            $(select).show();
        }
    }

    function ajax_post(element=null) {
        var frm = $('#selector');

        if (element != null) {
            // Reset selections
            var found=false;
            frm.find('select').each(function(e){
                if (found==true) {
                    $(this).hide().find('option:selected').prop("selected", false)
                }
                if (element==this) found=true;
            });
        }


        $.ajax({
        url: '?ajax=1',
        type: "POST",
        data: frm.serialize(),
        dataType: 'json',
            success: function (data) {

                if (data.box1hash != frm.find('.box1hash').val()) {
                    frm.find('.box1').html(data.box1?data.box1:'');
                    frm.find('.box1hash').val(data.box1hash);
                    show_hide_select(frm.find('.box1'));
                }

                if (data.box2hash != frm.find('.box2hash').val()) {
                    frm.find('.box2').html(data.box2?data.box2:'');
                    frm.find('.box2hash').val(data.box2hash);
                    show_hide_select(frm.find('.box2'));
                }

                if (data.box3hash != frm.find('.box3hash').val()) {
                    frm.find('.box3').html(data.box3?data.box3:'');
                    frm.find('.box3hash').val(data.box3hash);
                    show_hide_select(frm.find('.box3'));
                }

                if (data.box4hash != frm.find('.box4hash').val()) {
                    frm.find('.box4').html(data.box4?data.box4:'');
                    frm.find('.box4hash').val(data.box4hash);
                    show_hide_select(frm.find('.box4'));
                }

                if (data.box5hash != frm.find('.box5hash').val()) {
                    frm.find('.box5').html(data.box5?data.box5:'');
                    frm.find('.box5hash').val(data.box5hash);
                    show_hide_select(frm.find('.box5'));
                }

            }
        });
    }
</script>

【问题讨论】：

我不太清楚，但我认为你应该 serialize inputs 和 select 来自 #selected div 。不是整个 #selected div 看这里 > stackoverflow.com/questions/9589126/…
AJAX 显示数据正在发布来自其他隐藏字段的哈希值，而不是来自 box2... 框二是我在 PHP 中用于验证的一个，但页面上未显示。我认为问题在于 jquery 没有获得第一个框的值并且没有序列化内容本身。我已经更新了我的问题以进一步解释这一点。
你的js第一行不见了？当您更改表单容器时，jquery 'change' 的性质和组件选择器也会发生变化（因为它不再是表单，我认为您的 frm.serialize() 将不再起作用。因此可能需要不同的策略。你能总结一下你的整体预期行为？
是的，第一行的格式不正确，所以我必须先删除它才能让我发帖。我的意图是第一个下拉菜单将有 2 个选项，第二个下拉菜单将返回相对于第一个的结果，依此类推，最多可以嵌套 5 次。我的意图是从选择中获取值并使用 AJAX 发布，然后这将进入 PHP if 语句并返回正确的函数以输出到下一个下拉菜单中。在我将表单标签更改为 div 之前一切正常，所以我很肯定这不是 php 问题，而且 AJAX 仍在发布..
我同意这不是 php 问题。您是否考虑过将其返回到表单标签但将其与主表单分开以集中正在序列化的数据？

标签： php jquery json ajax input

【解决方案1】：

与我之前的 cmets 不同，一个表单标签不能嵌套在另一个表单标签中。 jquery serialize() 仅适用于表单，因此很遗憾无法将其集中在表单的 div 组件上。但是，您可以将整个表单序列化为字符串，然后提取该字符串的子部分以减少 ajax 发布。下面带有内联 cmets 的片段...

$('form').on({
 'change':function(e){
   e.preventDefault();
   var dats = $(this).serialize(); // serialize the whole form into a string
   var pico = dats.indexOf('&event_name='); // get the index of the end point of the desired data
   var newDats = dats.slice(0 , pico); // get the edited section for ajax submission
   $('#results').text(dats+' '+newDats);
   
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="add">
<div class="container">
    <form method="post" id='bob'>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
            </div>
            <div id="selector">
                <div class="panel-body">
                    <div class="col-md-6">
                        <select class="form-control box1" name="box1">
                        <option>a</option>
                        <option>b</option>
                        <option>c</option>
                        </select>
                        <input name="box1hash" class="box1hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box2" name="box2"></select>
                        <input name="box2hash" class="box2hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box3" name="box3"></select>
                        <input name="box3hash" class="box3hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box4" name="box4"></select>
                        <input name="box4hash" class="box4hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box5" name="box5"></select>
                        <input name="box5hash" class="box5hash" type="hidden" />
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
            </div>
            <div class="panel-body">
                <input name="event_name" type="text" class="form-control" />

            </div>
        </div>
        <input type="submit"/>
    </form>
</div>

<p><tt id="results"></tt></p>

【讨论】：

抱歉我的回复晚了。这实际上是通过在 frm 变量 var frm = $('#selector *'); 中添加 * 来纠正的。感谢您的帮助和建议！