By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,751 Members | 1,073 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,751 IT Pros & Developers. It's quick & easy.

hide/show text area with textEditor depends on dropdown value

100+
P: 123
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
  1. <script type="text/javascript" src="js/nicEdit.js"></script>
  2. <script type="text/javascript">
  3.     bkLib.onDomLoaded(function() {
  4.         new nicEditor({maxHeight : 200}).panelInstance('area');
  5.     });
  6. </script>
  7.  
Js to hide and show text area:
Expand|Select|Wrap|Line Numbers
  1.    <script type="text/javascript">
  2.         function showHide() 
  3.         {
  4.             if(document.getElementById("color_dropdown").selectedIndex == 1) 
  5.             {
  6.                 document.getElementById("hidden1").style.display = ""; // This line makes the DIV visible
  7.             } 
  8.             else {            
  9.                 document.getElementById("hidden1").style.display = "none"; // This line hides the DIV
  10.             }
  11.  
  12.             if(document.getElementById("color_dropdown").selectedIndex == 2) 
  13.             {
  14.                 document.getElementById("hidden2").style.display = ""; // This line makes the DIV visible
  15.             } 
  16.             else {            
  17.                 document.getElementById("hidden2").style.display = "none"; // This line hides the DIV
  18.             }
  19.  
  20.             if(document.getElementById("color_dropdown").selectedIndex == 3) 
  21.             {
  22.                 document.getElementById("hidden3").style.display = ""; // This line makes the DIV visible
  23.             } 
  24.             else {            
  25.                 document.getElementById("hidden3").style.display = "none"; // This line hides the DIV
  26.             }
  27.         }
  28.     </script>
  29.  
Html drop down:
Expand|Select|Wrap|Line Numbers
  1. <select name="menu"  id="color_dropdown" onchange="showHide()"> 
  2.                                                 <option>Select Meun</option>
  3.                                                 <option>One</option>
  4.                                                 <option>Two</option>
  5.                                                 <option>Three</option>
  6. </select>   
  7.  
  8. <textarea id="hidden1" name="area" display:none;"   id="area">ggggggggggggggggg</textarea>
  9. <textarea id="hidden2" name="area"  display:none;" id="area">hhhhhhhhhhhhhhhhh</textarea>
  10. <textarea id="hidden3" name="area"  display:none;"  id="area">yyyyyyyyyyyyyyyyy</textarea>
  11.  
Jul 13 '13 #1
Share this Question
Share on Google+
1 Reply

P: 57
Try This Code

Expand|Select|Wrap|Line Numbers
  1. <html lang="en">
  2. <head>
  3. <meta charset="utf-8">
  4. <title>jQuery Show Hide Elements Using Select Box</title>
  5. <style>
  6.     .box{
  7.         color: #fff;
  8.         padding: 20px;
  9.         display: none;
  10.         margin-top: 20px;
  11.     }
  12.     .red{ background: #ff0000; }
  13.     .green{ background: #228B22; }
  14.     .blue{ background: #0000ff; }
  15. </style>
  16. <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  17. <script>
  18. $(document).ready(function(){
  19.     $("select").change(function(){
  20.         $(this).find("option:selected").each(function(){
  21.             var optionValue = $(this).attr("value");
  22.             if(optionValue){
  23.                 $(".box").not("." + optionValue).hide();
  24.                 $("." + optionValue).show();
  25.             } else{
  26.                 $(".box").hide();
  27.             }
  28.         });
  29.     }).change();
  30. });
  31. </script>
  32. </head>
  33. <body>
  34.     <div>
  35.         <select>
  36.             <option>Choose Color</option>
  37.             <option value="red">Red</option>
  38.             <option value="green">Green</option>
  39.             <option value="blue">Blue</option>
  40.         </select>
  41.     </div>
  42.     <div class="red box">You have selected <strong>red option</strong> so i am here</div>
  43.     <div class="green box">You have selected <strong>green option</strong> so i am here</div>
  44.     <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
  45. </body>
  46. </html>
6 Days Ago #2

Post your reply

Sign in to post your reply or Sign up for a free account.