Solved

Show/hide listbox html5

Posted on 2014-03-25
7
618 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress and Wufoo 1 37
Printing customized headers and footers using html and bootstrap 3 26
Hide and Unhide Table 6 24
Regular Expression needed 4 14
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

740 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