Question

我有一个表格，我隐藏并根据下拉选项显示字段。最初，单击按钮时，仅显示下拉选择选项，其余字段将隐藏。保存表单后，用户可以添加另一个表单。因此，当我第二次点击该按钮时，.hide() / .show()不起作用。而是显示整个表单。这是我的代码：

$(document).ready(function () {
    $("#button").click(function () {
        alert("handler called");
        $("#name").hide();

        $("#selection").on('change', function () {
            alert("handler called1");
            if ($("#selection").val() == "day") {
                $("#name").show();
            }

        });
    });
});

我的HTML是：

<div id = "days">
       <table>
            <tbody>
                <tr>
                    <td>
                        <div class="selection" id="selection">
                            <table>
                                <tbody>
                                    <tr>
                                        <td><label>selection</label></td>
                                    </tr>
                                    <tr>
                                        <td><select class="selection"></select></td>
                                    </tr>
                                </tbody>
                            </table>          
                        </div>
                        <div class="name" id="name">
                            <table>
                                <tbody>
                                    <tr>
                                        <td><label>Name</label></td>
                                        <td><input type="text"</input></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
       </table>
 </div>

在

alert("Handler called");

第二次触发

，但.hide（）不起作用。

Answer 1

确实很难理解你的最终结果，但在分析了你在做什么之后，我认为这就是你想要的：

HTML：

<select id="days_dropdown">
    <option value='0'>select one</option>
    <option value='night'>night</option>
    <option value='day'>day</option>
    <option value='afternoon'>afternoon</option>
</select>
<form id="myForm" style="display:none">
    <label>Name</label>
    <input type="text">
    <button type="submit">Save</button>
</form>

JS：

$(document).ready(function() {

    $("#days_dropdown").change(function() {
        if ($(this).val() === "day") {
            $("#myForm").show();
        } else {
            $("#myForm").hide();
        }
    });

    $("#myForm").submit(function() {
        //..your code to save the form info
        $(this).hide();
        $("#days_dropdown").val(0);
        return false;
    });

});

让我知道这是否是想要的结果，并且更详细地解释你的错误。

Answer 2

开启

$("#selection").on('change', function () {

您选择ID为＃34; select＆＃34;的div，而不是选择标记。而且你也应该获得所选期权的价值，而不是＆＃34;选择＆＃34;的价值。标签需要修改一些JS代码才能正常工作：

$(document).ready(function () {
$("#button").click(function () {

    $("#name").hide();

    $("select.selection").on('change', function () {
        var sel = this;          
        if (sel.options[sel.selectedIndex].value == "day") {
            $("#name").show();
        }

    });
});
});

这是FIDDLE

Answer 3

很难明确地了解你的目标，但这是你想要做的吗？

HTML

<button id='btn'>Click Me</button>
<div id="days">
    <table>
        <tbody>
            <tr>
                <td>
                    <div>
                        <table>
                            <tbody>
                                <tr>
                                    <td><label>selection</label></td>
                                </tr>
                                <tr>
                                    <td>
                                        <select id="selection">
                                            <option value='something'>1</option>
                                            <option value='day'>2</option>
                                            <option value='something'>3</option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>          
                    </div>
                    <div class="name" id="name">
                        <table>
                            <tbody>
                                <tr>
                                    <td><label>Name</label></td>
                                    <td><input type="text"</input></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JS：

$(document).ready(function() {
    $("#btn").click(function() {
        $("#name").hide();

        $("#selection").on('change', function() {
            if ($("#selection").val() == "day") {
                $("#name").show();
            }

        });
    });
});

我最初看到的问题是您的.on('change')，您试图将其附加到div，但您想将其附加到select元素

Jquery .hide（）只在按钮点击时第一次触发html

3 个答案: