隐藏/显示 div 部分 - 选择选项答案

【问题标题】：Hide/show div section - select option隐藏/显示 div 部分 - 选择选项
【发布时间】：2015-07-07 04:18:34
【问题描述】：

感谢post，当从选择字段中选择一个值时，我已经实现了隐藏下拉菜单：

$(function () {
           var selectField = $('#id_type_contract'),
           verified = $('#id_mod_contracts');

        function toggleVerified(value) {
            value == 'Modification' ? verified.show() : verified.hide();
        }

        // show/hide on load based on pervious value of selectField
        toggleVerified(selectField.val());

        // show/hide on change
        selectField.change(function() {
            toggleVerified($(this).val());
        });
    });
        })(django.jQuery);

但它没有按我的意愿工作：Image，因为它的标签和“添加”按钮（绿色十字）仍然存在。所以，我认为最好的方法是隐藏整个 div，对吗？

html

<div class="form-row field-mod_contracts">
<div>
<label for="id_mod_contracts">Modification:</label>
<select id="id_mod_contracts" name="mod_contracts" style="display: none;">
    <option value="" selected="selected">---------</option>
    <option value="4">Contract foo</option>
    <option value="7">Contrato bar</option>
    <option value="8">contract CCCC</option>
</select><a href="/admin/app/contract/add/?_to_field=id" class="add-another" id="add_id_mod_contracts" onclick="return showAddAnotherPopup(this);"> <img src="/static/admin/img/icon_addlink.gif" width="10" height="10" alt="Add another"></a>
</div>
</div>

如何调整上述 JavaScript 函数？还有其他更好的选择吗？

【问题讨论】：

标签： javascript jquery html django

【解决方案1】：

要么按照@Aumo 的建议进行操作，除非您在更多元素上拥有 field-mod_contracts 类（然后它会将它们全部隐藏）。

如果是这样，您可以改用：

verified = $('#id_mod_contracts').parent();

这将选择最里面的 div

或：

verified = $('#id_mod_contracts').closest('.field-mod_contracts');

这将选择最外层的 div

【讨论】：

【解决方案2】：

两个隐藏整个输入部分，改变：

verified = $('#id_mod_contracts');

到

verified = $('.field-mod_contracts');

【讨论】：