Question

我一直在玩bootstrap模式来显示表单。一切都可以用于固定字段，但是我试图根据前一个字段的值显示div，并使用.show .hide读取几个关于div的切换可见性的示例。在模态框中工作正常，但在模态中所有都显示。我是新手，我很抱歉，如果我的问题不合适，任何灯光都会受到赞赏。这是形式：

<div id="createEventModal" class="modal hide">

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3>Crear Pauta</h3>
</div>

<div class="modal-body">
    <form id="PautasForm" class="form-horizontal">

        <div class="control-group">
            <label class="control-label" for="inputTitle">Title:</label>
            <div class="controls space">
                <input type="text" name="title" id="title" style="margin: 0 auto;">
                <input type="hidden" id="apptStartTime"/>
                <input type="hidden" id="apptEndTime"/>
                <input type="hidden" id="apptAllDay"/>
                <input type="hidden" id="apptResource"/>
                <input type="hidden" id="apptUser"/>
                <input type="hidden" id="apptEdit"/>
                <input type="hidden" id="apptID"/>
            </div>

            <div id="seller">
                <label class="control-label" for="SelIng">Seller</label>

                <div class="controls space">
                    <select id="ing" name="ing">
                        <option value="">Select</option>
                        <?php
                        while ($row = mysql_fetch_array($ing)) {
                            echo "<option value='" . $row['id_ing'] . "'>" . $row['nombre_ing'] . "</option>";
                        }
                        ?>
                    </select>
                </div>
            </div>

            <div id="task">
                <label class="control-label" for="SelTask">Task</label>

                <div class="controls space">
                    <select id="task" name="task">
                        <option value="0">Select task</option>
                        <option value="1">Customer Service</option>
                        <option value="2">Inventory</option>
                        <option value="3">Staff Management</option>                            
                    </select>
                </div>
            </div>

            <div id="loc">
                <label class="control-label" for="SelLoc">Manager</label>

                <div class="controls space">
                    <select id="manager" name="manager">
                        <option value="">Select Manager</option>
                        <?php
                        while ($row2 = mysql_fetch_array($loc)) {
                            echo "<option value='" . $row2['loc_id'] . "'>" . $row2['nombre_completo'] . "</option>";
                        }
                        ?>
                    </select>
                </div>
            </div>

        </div>
        <div class="control-group">
            <label class="control-label" for="when">When:</label>
            <div class="controls controls-row" id="when" style="margin-top:5px;">
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button type="submit" class="btn btn-primary" id="submitButton">Guardar</button>
</div>

这是剧本：

<script type='text/javascript'>

    $(document).ready(function () {

toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
        //this will call our toggleFields function every time the selection value of our underAge field changes
        $("#task").change(function () {
            toggleFields();
        });

    });

    function toggleFields() {
        if ($("#task").val() == 1) {
            $("#loc").show();
        } else {
            $("#loc").hide();
        }
    }

Answer 1

如果没有测试或看到你在行动中做了什么，我的理论是：

当您的切换功能被调用时，所有内容都已隐藏，因此隐藏其中的元素不会执行任何操作。无论是那个还是显示模态都会覆盖内部元素的隐藏。

尝试在显示模态时调用切换。

$('.modal').on('show.bs.modal', function() {
  toggleFields();
});

是否可以在Bootstrap Modal上显示和隐藏表单字段？

1 个答案: