Javascript 如何显示特定于所选下拉选项的文本块？_Javascript_Jquery_Html_Text_Drop Down Menu

Javascript 如何显示特定于所选下拉选项的文本块？

javascript jquery html text drop-down-menu

Javascript 如何显示特定于所选下拉选项的文本块？,javascript,jquery,html,text,drop-down-menu,Javascript,Jquery,Html,Text,Drop Down Menu,我一直在研究如何做到这一点，但找不到任何适合我的东西。我的HTML页面中有以下代码： <div id="one" style="border:solid 1px black;width:150px;background-color:#faebd7;display:none;"><p>DIV ID=one</p></div> <div id="two" style="border:solid 1px black;widt

我一直在研究如何做到这一点，但找不到任何适合我的东西。我的HTML页面中有以下代码：

<div id="one" style="border:solid 1px black;width:150px;background-color:#faebd7;display:none;"><p>DIV ID=one</p></div>
            <div id="two" style="border:solid 1px black;width:150px;background-color:#ffe4c4;display:none;"><p>DIV ID=two</p></div>
            <div id="three" style="border:solid 1px black;width:150px;background-color:#fae3d7;display:none;"><p>DIV ID=three</p></div>
            <div id="four" style="border:solid 1px black;width:150px;background-color:#ffe424;display:none;"><p>DIV ID=four</p></div>
            <select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
                <option value="">Select Team</option>
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
            </select>

我遵循了教程中的代码。目前，我的页面上只显示一个下拉菜单。当我选择一个选项时，不会显示任何文本框。有人能帮我找出原因吗

非常感谢

您已经标记了jQuery，所以我假设您正在某处使用它，但为什么不在这里呢

用更少的代码得到了你想要的

HTML:

在不了解所有内容的情况下，很难找出问题所在，但将JS放在文档的开头对我来说很有效

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function ShowDiv() {
                safeToggleFieldDisplay(document.getElementById('one'), 'none');
                safeToggleFieldDisplay(document.getElementById('two'), 'none');
                safeToggleFieldDisplay(document.getElementById('three'), 'none');
                safeToggleFieldDisplay(document.getElementById('four'), 'none');

                var dropdown = document.getElementById("ContentListBox");
                var index = dropdown.selectedIndex;
                var selectedDIV = dropdown.options[index].value;
                safeToggleFieldDisplay(document.getElementById(selectedDIV), 'flip');
            }

            function safeToggleFieldDisplay(field, sVisibility) {
                try {
                    if ((field) && (field.style)) {
                        if (sVisibility == 'flip') {
                            if (field.style.display == 'none') {
                                sVisibility = 'block';
                            }
                            else {
                                sVisibility = 'none';
                            }
                        }
                        field.style.display = sVisibility;
                    }
                }
                catch (exception) {
                    //no handling - just preventing page explosions
                }
            }

        </script>
    </head>
    <body>

        <div id="one" style="border:solid 1px black;width:150px;background-color:#faebd7;display:none;"><p>DIV ID=one</p></div>
            <div id="two" style="border:solid 1px black;width:150px;background-color:#ffe4c4;display:none;"><p>DIV ID=two</p></div>
            <div id="three" style="border:solid 1px black;width:150px;background-color:#fae3d7;display:none;"><p>DIV ID=three</p></div>
            <div id="four" style="border:solid 1px black;width:150px;background-color:#ffe424;display:none;"><p>DIV ID=four</p></div>
            <select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
                <option value="">Select Team</option>
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
            </select>

    </body>
</html>


函数ShowDiv（）{
safeToggleFieldDisplay（document.getElementById（'one'），'none'）；
safeToggleFieldDisplay（document.getElementById（'two'），'none'）；
safeToggleFieldDisplay（document.getElementById（'three'），'none'）；
safeToggleFieldDisplay（document.getElementById（'four'），'none'）；
var dropdown=document.getElementById（“ContentListBox”）；
var指数=下拉列表。selectedIndex；
var selectedDIV=下拉列表。选项[index]。值；
safeToggleFieldDisplay（document.getElementById（selectedDIV），“flip”）；
}
功能安全切换字段显示（字段、可视性）{
试一试{
if（（字段）和&（字段样式））{
如果（可视性==‘翻转’）{
如果（field.style.display=='none'）{
可视性='块'；
}
否则{
可视性=‘无’；
}
}
field.style.display=sVisibility；
}
}
捕获（例外）{
//没有处理-只是防止页面爆炸
}
}
DIV ID=1
DIV ID=2
DIV ID=3
DIV ID=4
选拔队
一
二
三
四

我想您的问题在于您将js函数代码放在了divs html代码之后。因为当我在中选择

，而不是在onLoad@BatuZet中选择时，这会起作用是的，这可能是个问题。非常感谢大家，让它起作用了！非常感谢。非常感谢大家，让它工作起来！非常感谢。非常感谢大家，让它工作起来！非常感谢。
<div id="one">Div one</div>
<div id="two">Div two</div>
<div id="three">Div three</div>
<div id="four">Div four</div>

<select>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
</select>

$('select').change(function(){
    var value = $(this).val();
    showDiv(value);
});

function showDiv(id) {
    if(id == 'one') {
        $('#one').show();
        $('#two,#three,#four').hide();
    } else if (id == 'two') {
        $('#two').show();
        $('#one,#three,#four').hide();
    } else if (id == 'three') {
        $('#three').show();
        $('#one,#two,#four').hide();
    } else if (id == 'four') {
        $('#four').show();
        $('#one,#two,#three').hide();
    }
}

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function ShowDiv() {
                safeToggleFieldDisplay(document.getElementById('one'), 'none');
                safeToggleFieldDisplay(document.getElementById('two'), 'none');
                safeToggleFieldDisplay(document.getElementById('three'), 'none');
                safeToggleFieldDisplay(document.getElementById('four'), 'none');

                var dropdown = document.getElementById("ContentListBox");
                var index = dropdown.selectedIndex;
                var selectedDIV = dropdown.options[index].value;
                safeToggleFieldDisplay(document.getElementById(selectedDIV), 'flip');
            }

            function safeToggleFieldDisplay(field, sVisibility) {
                try {
                    if ((field) && (field.style)) {
                        if (sVisibility == 'flip') {
                            if (field.style.display == 'none') {
                                sVisibility = 'block';
                            }
                            else {
                                sVisibility = 'none';
                            }
                        }
                        field.style.display = sVisibility;
                    }
                }
                catch (exception) {
                    //no handling - just preventing page explosions
                }
            }

        </script>
    </head>
    <body>

        <div id="one" style="border:solid 1px black;width:150px;background-color:#faebd7;display:none;"><p>DIV ID=one</p></div>
            <div id="two" style="border:solid 1px black;width:150px;background-color:#ffe4c4;display:none;"><p>DIV ID=two</p></div>
            <div id="three" style="border:solid 1px black;width:150px;background-color:#fae3d7;display:none;"><p>DIV ID=three</p></div>
            <div id="four" style="border:solid 1px black;width:150px;background-color:#ffe424;display:none;"><p>DIV ID=four</p></div>
            <select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
                <option value="">Select Team</option>
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
            </select>

    </body>
</html>