jquery隐藏的div未显示在加载页面上答案

【问题标题】：jquery hidden div not displayed on loading pagejquery隐藏的div未显示在加载页面上
【发布时间】：2023-04-05 23:51:02
【问题描述】：

我正在尝试根据选择显示/隐藏 div。

下面的代码可以正常工作，但在使用默认选定值 (opt3) 加载页面时不起作用。

如何在第一次加载 jquery 时显示 div id #opt3？

<body>

        <div>

        <p>

                <select name="routing-sel" id="routing">

                        <option value="opt1">opt1</option>

                        <option value="opt2">opt2</option>

                        <option value="opt3" selected>opt3</option>

                        <!-- the selected value will be dynamically generated by PHP-->

                </select>

                </p>

        </div>



        <div id="opt1" class="form" style="display:none">

                <p>opt1 selected</p>

        </div>

        <div id="opt2" class="form" style="display:none">

                <p>opt2 selected</p>

        </div>

        <div id="opt3" class="form" style="display:none">

                <p>opt3 selected</p>

        </div>



        <script src="jquery-1.11.3.min.js"></script>



        <script>

        $(document).ready(function() {

                $('select#routing').change(function() {

                        $('.form').hide();

                        $('#' + $(this).val()).show();

                });

        });

        </script>

</body>

【问题讨论】：

$('#' + $('select#routing').val()).show();?

标签： jquery html select hide

【解决方案1】：

你可以这样做：

  $(document).ready(function() {

            $('#' + $("#routing").val()).show(); // Show default chosen option on load

            $('select#routing').change(function() {

                    $('.form').hide();

                    $('#' + $(this).val()).show();

            });

    });

http://jsfiddle.net/sandenay/8zewxp7r/

【讨论】：

【解决方案2】：

只需修改您的 document.ready 即可。这将起作用..

$(document).ready(function() {

    $('#' + $('select#routing').val()).show();

            $('select#routing').change(function() {

                    $('.form').hide();

                    $('#' + $(this).val()).show();

            });

    });

【讨论】：