Question

我有一个JQuery函数（在另一个Stackoverflow帖子的帮助下）隐藏/显示div，具体取决于选择/下拉列表中当前选择的内容。这很好用。

当我编辑记录时，选择字段的存储值显示在选择/下拉列表中，但相应的div保持隐藏，直到在选择字段上进行更改。

代码

<script>
    $(document).ready(function () {
        $('.jshideshow').hide();
        $('#id_selection_basis').change(function () {
            $('.jshideshow').hide();
            $('#'+$(this).val()).show();
        })
    }); 
</script>

我已经尝试过上面代码的各种组合，直接在Update View值上显示div，但到目前为止所有这些都没有成功。

非常感谢任何帮助！

Answer 1

请发布相应的HTML，我无法理解您的确切问题，但我确切地说明了您的代码正在做什么，所以您可以从那里弄明白。

<script>
    $(document).ready(function () {

        $('.jshideshow').hide(); // 1

        $('#id_selection_basis').change(function () {
            $('.jshideshow').hide(); // 2
            $('#'+$(this).val()).show(); // 3
        })

    }); 
</script>

由于您默认隐藏.jshideshow，因此请在html中的元素上内联display: none或将其添加到css类（这不会导致您的问题）
这也隐藏了.jshideshow - 为什么你需要隐藏已隐藏的东西？如果显示/隐藏的所有div都具有此类，那么在您在目标元素上调用.show()之前隐藏它们是有意义的（参见＃3）
这会显示#id_selection_basis

如果您要向#id_selection_basis添加元素，则需要使用$(document).on('change', '#id_selection_basis', function () { ... })侦听更改事件。事件侦听器在页面加载时绑定到DOM，因此如果在页面加载后向DOM添加元素，则需要在$(document)上监听它。

Answer 2

经过一次小小的顿悟后，我想我找到了一个解决方案。希望它可以帮助其他有类似问题的人。

<script>
    $(document).ready(function () {
        $('.jshideshow').hide();
        var failureValue = $( "#id_selection_basis" ).val();
        $('#' + failureValue).show();

        $('#id_selection_basis').change(function () {
            $('.jshideshow').hide();
            $('#'+$(this).val()).show();
        })

    });
</script>

JQuery选择函数没有显示div

2 个答案: