Solved

Show/hide listbox html5

Posted on 2014-03-25
7
624 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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