Solved

Show/hide listbox html5

Posted on 2014-03-25
7
592 Views
Last Modified: 2014-03-25
Hi!

Have 1 listbox

Listbox1
*******
Report 1
Report 2
Report 3

If the user select 'Report 3' it must show 2
new Listboxes like:

Listbox2
*******
TEST 1
TEST 2

Listbox3
*******
Values from MS SQL --> Listbox2.TEST 1 or Listbox2.TEST 2

Listbox2(3) wil only be visible when Report 3 is selected

How can i do this ?
0
Comment
Question by:team2005
  • 4
  • 3
7 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
First setup a page on jsfiddle or provide you current HTML.

Assuming you've :
<select id="Listbox1"
<select id="Listbox2"
<select id="Listbox3"

add the following in head section :
<style type="text/css">
    #Listbox2,Listbox3 {
          display:none;
    }
</style>
<script>
window.onload = function() {
   document.getElementById("Listbox1").onchange = function() {
        if(this.options[this.selectedIndex].text=="Report 3") {
             document.getElementById("Listbox2").style.display = "block";
             document.getElementById("Listbox3").style.display = "block";
        }
        else {
             document.getElementById("Listbox2").style.display = "none";
             document.getElementById("Listbox3").style.display = "none";
        }

   }
}
</script>

Open in new window


If that don't work on your side, please create a very simple basic example here : http://jsfiddle.net/
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

Used this example here :   http://jsfiddle.net/

<table>
    
    <tr>
        <td class="rapport1_del3" align="right">Rapport</td>
        <td>
          <select id="Rapport" name="Rapport" class="selmenu">  
          <?php
              echo "<option>Rapp1</option>";
              echo "<option>Rapp2</option>";
              echo "<option>Varemottak</option>"; ?>
         </select>
        </td>
       </tr>
<tr>
	   <td  class="rapport1_del3" align="right">Sorter:</td>
	   <td>
	   <select id="sorteringkat" name="sorteringkat" class="selmenu">
	   
	   	<?php
		      
                        echo "<option>Kategori 1</option>"; 
                        echo "<option>Kategori 2</option>"; 
                ?>
	   </select>
	   </td>  
	   </tr>
	   <tr>
	   <td  class="rapport1_del3" align="right">Velg kategori:</td>
	   <td>
	   <select id="kategorier" name="kategorier" class="selmenu">
	   
	   	<?php
                        echo "<option>TEST 1</option>"; 
                        echo "<option>TEST 2</option>"; 
                ?>
	   </select>
	   </td>  
	   </tr>
</table>

Open in new window


And pu this jquery in the last window

<style type="text/css">
    #sorteringkat {
          display:none;
    }
    #kategorier {
         display:none;
    }
</style>
<script>
window.onload = function() {
   document.getElementById("Rapport").onchange = function() {
        if(this.options[this.selectedIndex].text=="Varemottak") {
             document.getElementById("sorteringkat").style.display = "block";
             document.getElementById("kategorier").style.display = "block";
        }
        else {
             document.getElementById("sorteringkat").style.display = "none";
             document.getElementById("kategorier").style.display = "none";
        }

   }
}
</script>


But dosent work ?

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 2

Author Closing Comment

by:team2005
Comment Utility
Thanks :)
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
How to hide text
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
I belive you want to hide the row, so put(or add) the id to each row instead each dropdown
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
thanks
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now