stackoom
  简体   繁体   中英

Hide input boxes based on drop down selection

 原文  2013-01-18 17:32:21  7   7    javascript/ jquery

Question

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.

If the user selects 1, only 1 table shows If the user selects 2, 2 tables show

I have added the code so hopefully it makes more sense 

<body>
    <p>Please select number of puppies:</p>
    <p>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </p>
    <form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
        <p>Puppy 1:  </p>
        <p>&nbsp;</p>
        <table width="330" border="0">
            <tr>
                <td>Name: </td>
                <td><input type="text" name="PuppyName1" /></td>
            </tr>
            <tr>
                <td>Colour: </td>
                <td><input type="text" name="PuppyColour1" /></td>
            </tr>
            <tr>
                <td>Sex:</td>
                <td>
                    <select name="PuppySex1" id="PuppySex1">
                        <option value=" "> </option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Microchip/DNA Profile:</td>
                <td>
                    <select name="PuppyMicrochip1" id="PuppyMicrochip1">
                        <option value="No">No</option>
                        <option value="Microchip">Microchip</option>
                        <option value="DNA Profile">DNA Profile</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><p>Microchip/DNA Number:</p></td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <p>Puppy 2:</p>
        <table width="330" border="0">
            <tr>
                <td>Name: </td>
                <td><input type="text" name="PuppyName2" /></td>
            </tr>
            <tr>
                <td>Colour: </td>
                <td><input type="text" name="PuppyColour2" /></td>
            </tr>
            <tr>
                <td>Sex:</td>
                <td>
                    <select name="PuppySex2" id="PuppySex2">
                        <option value=" "> </option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Microchip/DNA Profile:</td>
                <td>
                    <select name="PuppyMicrochip2" id="select2">
                        <option value="No">No</option>
                        <option value="Microchip">Microchip</option>
                        <option value="DNA Profile">DNA Profile</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><p>Microchip/DNA Number:</p></td>
                <td>
                    <input name="PuppyMicrochipNum2" type="text" 
                        id="PuppyMicrochipNum2" />
                </td>
            </tr>
        </table>

7 answers

solution1
 1 ACCPTED  2013-01-18 17:48:31

jsFiddle: http://jsfiddle.net/h3XLP/

very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript

note: add the attribute style="display:none;" to the second table 

var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
    if(select.value=="2"){
       document.getElementsByTagName("table")[1].style.display="inline";
    }else{
       document.getElementsByTagName("table")[1].style.display="none";
    }

}

however you should alternatively use below, as you may have more select and table elements in your document

http://jsfiddle.net/h3XLP/1/ 

var select = document.getElementById("selectnopuppies");
select.onchange=function(){
    if(select.value=="2"){
       document.getElementById("secondpuppytable").style.display="inline";
    }else{
       document.getElementById("secondpuppytable").style.display="none";
    }

}

<p>Please select number of puppies:</p>
<p>
    <select id="selectnopuppies">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
    <p>Puppy 1:</p>
    <p>&nbsp;</p>
    <table width="330" border="0">
        <tr>
            <td>Name:</td>
            <td>
                <input type="text" name="PuppyName1" />
            </td>
        </tr>
        <tr>
            <td>Colour:</td>
            <td>
                <input type="text" name="PuppyColour1" />
            </td>
        </tr>
        <tr>
            <td>Sex:</td>
            <td>
                <select name="PuppySex1" id="PuppySex1">
                    <option value=" "></option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Microchip/DNA Profile:</td>
            <td>
                <select name="PuppyMicrochip1" id="PuppyMicrochip1">
                    <option value="No">No</option>
                    <option value="Microchip">Microchip</option>
                    <option value="DNA Profile">DNA Profile</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <p>Microchip/DNA Number:</p>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <div id="secondpuppytable"  style="display:none;">
    <p>Puppy 2:</p>
    <table width="330" border="0">
        <tr>
            <td>Name:</td>
            <td>
                <input type="text" name="PuppyName2" />
            </td>
        </tr>
        <tr>
            <td>Colour:</td>
            <td>
                <input type="text" name="PuppyColour2" />
            </td>
        </tr>
        <tr>
            <td>Sex:</td>
            <td>
                <select name="PuppySex2" id="PuppySex2">
                    <option value=" "></option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Microchip/DNA Profile:</td>
            <td>
                <select name="PuppyMicrochip2" id="select2">
                    <option value="No">No</option>
                    <option value="Microchip">Microchip</option>
                    <option value="DNA Profile">DNA Profile</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <p>Microchip/DNA Number:</p>
            </td>
            <td>
                <input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
            </td>
        </tr>
    </table>
    </div>

solution2
 0  2013-01-18 17:43:33

You can do something like this:

When you select 1st option, it will show you firSt table and for 2nd it will show you both tables. 

$("table").hide();
$("select option").change(function(){
    Val = $(this).val();
     If(Val ==1) {
        $("table")[0].show();
        $("table")[1].hide();
      } else {
        $("table").show();
     }
});

solution3
 0  2013-01-18 17:45:59

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.

Try this: 

$('#dropdown').change(function(){

    var dropdown = $(this);

    var tables = $('.tableSelector');

    tables.hide();

    tables.slice(0,dropdown.val()).show();
});

Working jsfiddle: http://jsfiddle.net/v5TTz/

I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.

However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

solution4
 0  2013-01-18 17:48:21

I have modified your code... It's working now... try this... 

<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
    document.getElementById("Puppy1").style.display = '';
    document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>

 <body>
 <p>Please select number of puppies:</p>
 <p>
 <select onchange = "go()" id="selCount">
 <option value="1">1</option>
 <option value="2">2</option>
 </select>
 </p>
 <form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
 <p>Puppy 1:  </p>
 <p>&nbsp;</p>
 <table width="330" border="0" id="Puppy1">
 <tr>
<td>Name: </td>
 <td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
 <td><input type="text" name="PuppyColour1" /></td>
 </tr>
 <tr>
 <td>Sex:</td>
 <td><select name="PuppySex1" id="PuppySex1">
 <option value=" "> </option>
 <option value="Male">Male</option>
 <option value="Female">Female</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Microchip/DNA Profile:</td>
 <td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
 <option value="No">No</option>
 <option value="Microchip">Microchip</option>
 <option value="DNA Profile">DNA Profile</option>
 </select></td>
 </tr>
 <tr>
 <td><p>Microchip/DNA Number:</p></td>
 <td>&nbsp;</td>
 </tr>
 </table>
 <p>Puppy 2:</p>
 <table width="330" border="0"  id="Puppy2">
 <tr>
 <td>Name: </td>
 <td><input type="text" name="PuppyName2" /></td>
 </tr>
 <tr>
 <td>Colour: </td>
 <td><input type="text" name="PuppyColour2" /></td>
 </tr>
 <tr>
 <td>Sex:</td>
 <td><select name="PuppySex2" id="PuppySex2">
 <option value=" "> </option>
 <option value="Male">Male</option>
 <option value="Female">Female</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Microchip/DNA Profile:</td>
 <td><select name="PuppyMicrochip2" id="select2">
 <option value="No">No</option>
 <option value="Microchip">Microchip</option>
 <option value="DNA Profile">DNA Profile</option>
 </select></td>
 </tr>
 <tr>
 <td><p>Microchip/DNA Number:</p></td>
 <td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
 </tr>
</table>



  </body>
</html>

solution5
 0  2013-01-18 17:49:58

A little bit of javascript: 

<script>
function showtable(o){
   if(o.value==2){document.getElementById('table2').style.display='block';}
   else{document.getElementById('table2').style.display='none';}
   }
</script>

<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
   <option selected value="1">1</option>
   <option value="2">2</option>
</select>

<table id='table2' width="330" border="0" style="display:none">

solution6
 0  2013-01-18 18:23:02

HTML Changes 

<select onchange="showForm(this.options[this.selectedIndex]);">

Why it's needed ?

For listening the select box value change . 

<table width="330" border="0" class="puppy">

Added class=puppy attribute for readability . For hiding table element will be generic and error prone.

Javascript Changes

function showForm(option){ //option user has selected. var val = parseInt(option.value); //form elements in a document. var forms = document.getElementsByClassName("puppy"); 

  for(var i=0,total=forms.length;i<total;i++){
     var form = forms[i];
     var display = form.style.display;
     if(i<val && display == "none"){
        form.style.display = "block";
     }else if(i >= val && display != "none"){
        form.style.display = "none";
     }
   }

}

Live Demo @ http://jsfiddle.net/A3eFz/31/

solution7
 0  2014-01-17 16:35:05

Please try with following example, hope this helps. 

<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
 <option value="00">0</option>
 <option value="01">1</option>
 <option value="02">2</option>
 <option value="03">3</option>
 <option value="04">4</option>
 <option value="05">5</option>
 <option value="06">6</option>
 <option value="07">7</option>
 <option value="08">8</option>
 <option value="09">9</option>
 <option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>



 <script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
 $('#groups').empty();
 var group = '';
 var number = parseInt($(this).val());
   for(var i=0;i<number;i++){
       group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
  $('#groups').append(group);

  $('#other').empty();
  var other = '';
  other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';

$('#other').append(other);
});
});
</script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Hide four input boxes based on drop down selection hide and show input text based on drop down selection however Show/Hide text box based on selection from multiple drop down boxes show and hide based on drop-down selection Hide field based on drop down selection in sharepoint new item Show/hide form fields based on a selection from a drop down menu How to hide and show content based on drop down selection Display or hide drop down box based on user checkbox selection how to show/hide div based on drop down selection using angular? Use JQuery to hide and show a div based on drop down selection
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM