Question

我从数据库中提取变量，其值可以是Manual或Automatic。用户还可以使用下拉列表更改值。

如果该值已经Manual，我需要它取消隐藏DIV，或者如果它是Automatic并且用户切换到Manual我需要取消隐藏DIV。

我目前只有在Automatic并且用户选择Manual时才取消隐藏。

这是一个JSFiddle：http://jsfiddle.net/DTcHh/5031/

任何帮助将不胜感激。

谢谢！

HTML：

<form class="form-horizontal" method="post">
<div class="form-group">
    <label class="col-md-5 control-label" for="method">Method:</label>
    <div class="col-md-6">
        <select id="method" name="method" class="form-control">
            <option value="Automatic">Automatic</option>
            <option value="Manual">Manual</option>
        </select>
    </div>
</div>
<div id="manual" class="panel panel-default" style="display:none">
    <div class="panel-heading">
        <h4 class="panel-title">
            Manual
        </h4>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label class="col-md-5 control-label" for="activitycomplete">Activity Complete:</label>
            <div class="col-md-6">
                <select id="activitycomplete" name="activitycomplete" class="form-control">
                    <option value="False">False</option>
                    <option value="True">True</option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
<div class="form-actions">
    <button type="submit" class="btn btn-success">Update</button>
    <button type="button" data-dismiss="modal" class="btn btn-default">Back</button>
</div>
</form>

JQuery的：

$(document).ready(function () {
    $('#method').change(function () {
        $('#manual').toggle(500);
    });
//$("#method").val('Manual');
});

Answer 1

代码中没有实际检查值的逻辑。基本上，这个规则没有实现：

如果该值已经是手动我需要它取消隐藏DIV或者如果它是自动的并且用户切换到手动我需要取消隐藏DIV。

代码假设初始值始终＆＃34;自动＆＃34;并且总是永远是两个值之间的单向或另一个切换。这个假设是不正确的。

不是假设值而只是切换，而是根据检查的值明确显示/隐藏：

$('#method').change(function () {
    if ($(this).val() == 'Manual') {
        $('#manual').show(500);
    } else {
        $('#manual').hide(500);
    }
});

您可以将其提取到函数中，以便也可以手动调用它：

var toggleDiv = function () {
    if ($('#method').val() == 'Manual') {
        $('#manual').show(500);
    } else {
        $('#manual').hide(500);
    }
}
$('#method').change(toggleDiv);

然后，您也可以在首次加载页面时调用它：

$("#method").val('Manual');
toggleDiv();

Example here

Answer 2

如果manual运行切换功能，您需要检查dropdox和页面加载的值：

$(document).ready(function () {
    $('#method').change(function () {
        $('#manual').toggle(500);
    });
    var valueOfDropDown = $('#method').val();
    if(valueOfDropDown === "Manual"){
        $('#manual').toggle(500);
    }
});

一旦dom准备就绪，这显然会显示该框。

使用JQuery隐藏/取消隐藏DIV

2 个答案: