使用textEditor隐藏/显示文本区域取决于下拉值

时间:2013-07-13 15:52:22

标签: javascript jquery drop-down-menu jquery-selectors

我在我的文本区域使用NicEdit(www.nicedit.com)文本编辑器正在工作,下面的代码隐藏并显示文本区域,在下拉列表中选择一个值后会显示文本区域但是这个是我需要帮助的;

1)我希望在您从下拉列表中选择任何值之前显示文本区域。

2)我希望文本编辑器(NicEdit)在从下拉列表中选择一个值后显示所有文本区域以显示文本区域。

Js For Text-editor(Nicedit):

<script type="text/javascript" src="js/nicEdit.js"></script>
<script type="text/javascript">
    bkLib.onDomLoaded(function() {
        new nicEditor({maxHeight : 200}).panelInstance('area');
    });
</script>

Js隐藏并显示文本区域:

   <script type="text/javascript">
        function showHide() 
        {
            if(document.getElementById("color_dropdown").selectedIndex == 1) 
            {
                document.getElementById("hidden1").style.display = ""; // This line makes the DIV visible
            } 
            else {            
                document.getElementById("hidden1").style.display = "none"; // This line hides the DIV
            }

            if(document.getElementById("color_dropdown").selectedIndex == 2) 
            {
                document.getElementById("hidden2").style.display = ""; // This line makes the DIV visible
            } 
            else {            
                document.getElementById("hidden2").style.display = "none"; // This line hides the DIV
            }

            if(document.getElementById("color_dropdown").selectedIndex == 3) 
            {
                document.getElementById("hidden3").style.display = ""; // This line makes the DIV visible
            } 
            else {            
                document.getElementById("hidden3").style.display = "none"; // This line hides the DIV
            }
        }
    </script>

Html下拉:

<select name="menu"  id="color_dropdown" onchange="showHide()"> 
<option>Select Meun</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>   

    <textarea id="hidden1" name="area" display:none;"   id="area">ggggggggggggggggg</textarea>
    <textarea id="hidden2" name="area"  display:none;" id="area">hhhhhhhhhhhhhhhhh</textarea>
    <textarea id="hidden3" name="area"  display:none;"  id="area">yyyyyyyyyyyyyyyyy</textarea>

1 个答案:

答案 0 :(得分:1)

只是一个小注释,每个文本区域有更多的id属性,第二个id具有相同的值,这应该是一个类。 &#34;显示:无;&#34;在你的textareas中没有样式标签(style =&#34; display:none;&#34;),也尝试在最后一个html标签(或最后一个标签)之前的html页面底部链接/加载javascript标签)。

我不确定这是否能解决您的问题,但这可能是问题。