Solved

Show/hide listbox html5

Posted on 2014-03-25
7
599 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
ID: 39953366
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
ID: 39953621
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
ID: 39953649
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Closing Comment

by:team2005
ID: 39953698
Thanks :)
0
 
LVL 2

Author Comment

by:team2005
ID: 39953703
How to hide text
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39953754
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
ID: 39954578
thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

943 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

10 Experts available now in Live!

Get 1:1 Help Now