hide/show text area with textEditor depends on dropdown value

123 100+

I use the NicEdit(www.nicedit.com) text-editor on my Text Area which is working and the below code to hide and show text area after selecting a value in the drop down it will show the text area but this is what i need help with:

1) i want the text area to show even before you select any value from the drop down.

2) i want the Text editor(NicEdit) to show on all the text area after selecting a value from the drop down to show the text area.

Js For Text-editor(Nicedit):

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript" src="js/nicEdit.js"></script>

<script type="text/javascript">

    bkLib.onDomLoaded(function() {

        new nicEditor({maxHeight : 200}).panelInstance('area');

    });

</script>

Js to hide and show text area:

Expand|Select|Wrap|Line Numbers

 
   <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 drop down:

Expand|Select|Wrap|Line Numbers

 
<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>

Jul 13 '13 #1

Subscribe Post Reply

3803

Sherin

64KB

Try This Code

Expand|Select|Wrap|Line Numbers

 <html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Show Hide Elements Using Select Box</title>

<style>

    .box{

        color: #fff;

        padding: 20px;

        display: none;

        margin-top: 20px;

    }

    .red{ background: #ff0000; }

    .green{ background: #228B22; }

    .blue{ background: #0000ff; }

</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("select").change(function(){

        $(this).find("option:selected").each(function(){

            var optionValue = $(this).attr("value");

            if(optionValue){

                $(".box").not("." + optionValue).hide();

                $("." + optionValue).show();

            } else{

                $(".box").hide();

            }

        });

    }).change();

});

</script>

</head>

<body>

    <div>

        <select>

            <option>Choose Color</option>

            <option value="red">Red</option>

            <option value="green">Green</option>

            <option value="blue">Blue</option>

        </select>

    </div>

    <div class="red box">You have selected <strong>red option</strong> so i am here</div>

    <div class="green box">You have selected <strong>green option</strong> so i am here</div>

    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

</body>

</html>

Nov 27 '20 #2

Similar topics

Hide / Show form Elements.

by: jerryyang_la1 | last post by:

I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...

Javascript

asp:checkbox hide/show text/fields when it's clicked without doing a postback?

by: UJ | last post by:

Is there a way with a asp:checkbox to run a JavaScript to display/hide text/input on the screen without doing a postback? I also need to be able to access the stuff at the server so I need to...

ASP.NET

Hide/Show Selection List

by: srampally | last post by:

I need the capabilty to hide/show a selection list, just the way its done at http://www.lufthansa.com (place the cursor over "Group Companies"). However, I am looking for a javascript that is much...

Javascript

Hide/Show Text Area Using Select List

by: devine | last post by:

Hi All, I am VERY new to Javascript. I have been provided with some code, which will enable me to hide/show a text area and change a submit button dependant on a check box. <!DOCTYPE html...

Javascript

Help about div hide/show

by: ali | last post by:

Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of...

Javascript

show text box in a currency value

by: maxamis4 | last post by:

I have a text box that holds a value of 300 how do I make it show $ 300.00, not to mention their are multiple records that have 1200, 900, and I want them to display with the dollar sign.

.NET Framework

Hide Show Text

by: stuy2k | last post by:

Hi im trying to make a section of text appear and disapear by clicking the question find example at - http://www.yellowtruck.co.uk/pascoes2/Untitled-4.html the java script i am using is found...

Javascript

Changing the dropdown box to text area on clicking link

by: Kirthikaiitm | last post by:

Hi, I am new to Javascript. I want to change the dropdown box to text area on clicking the link provided below Dropdown box and i want to get the value entered in text box. Then i have to...

Javascript

Hide/Show input field based on a value of drop down list

by: nithingujjar | last post by:

Hi, I need to to hide a field"addr_state1" based on a value in the drop down list field called "addr_country".i.e.,if addr_country.value=="in" then hide addr_state1 else , and if the value in the...

Javascript

Hide/Show Text + TextField

by: Luxury17 | last post by:

I know this has been posted and asked about many times, but I still cannot seem to find an answer that fits my situation. I am pretty new with javascripting, and have been teaching myself as the...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp