根据下拉选择隐藏输入框答案

【问题标题】：Hide input boxes based on drop down selection根据下拉选择隐藏输入框
【发布时间】：2013-01-18 17:32:21
【问题描述】：

我想要页面顶部的下拉菜单来确定页面上显示的框数。

如果用户选择 1，则只显示 1 个表格如果用户选择2，则显示2个表格

我已经添加了代码，希望它更有意义

<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>

【问题讨论】：

你试过什么方法了吗？有几种方法可以做到这一点...
您只添加了表格代码。我在任何地方都没有看到 jQuery/JavaScript 代码。
是的，我已经尝试了一些我在谷歌上搜索过的东西，但它们并不是我想要的，所以我删除了它们

标签： javascript jquery

【解决方案1】：

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

获取 jQuery 答案很常见，但对于独立的 JavaScript 来说确实不是那么全面

注意：将属性style="display:none;"添加到第二个表中

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";
    }

}

但是你应该在下面使用，因为你的文档中可能有更多的选择和表格元素

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>

【讨论】：

您好，非常感谢您的回复。当我复制和粘贴代码时，我似乎无法让它工作。它是用普通的 javascript 编写的，不是吗？
是的，你必须像这样<script type='text/javascript'> window.onload=function(){ 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"; } } } </script>
太棒了，不知道我做错了什么，谢谢。如果我想添加更多表格那么容易吗？再次感谢
我可以添加更多的表，3,4,5 等吗？
让我修改代码以使您能够执行此操作，请稍等

【解决方案2】：

鉴于选项 1 应显示表 1，选项 2 应显示表 1 和 2，依此类推。

试试这个：

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

    var dropdown = $(this);

    var tables = $('.tableSelector');

    tables.hide();

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

工作 jsfiddle：http://jsfiddle.net/v5TTz/

我已经用 css 类“tableSelector”标记了所有表，然后每次下拉更改值时，我都会显示与下拉列表的当前值对应的表数。此解决方案要求表格在 DOM 中以正确的顺序放置。

但是，在我看来，这听起来像是模板的案例，比如 jQuery 模板或 Hoganjs。

【讨论】：

【解决方案3】：

我已经修改了你的代码...现在可以工作了...试试这个...

<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>

【讨论】：

当您使用此代码刷新页面时，它会自动显示 2 个表格，我可以先显示 1 个，如果用户选择 2，则显示第二个表格

【解决方案4】：

你可以这样做：

当您选择第一个选项时，它将向您显示第一个表，而对于第二个选项，它将显示您两个表。

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

【讨论】：

【解决方案5】：

一点点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">

【讨论】：

【解决方案6】：

HTML 更改

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

为什么需要它？

用于监听选择框值变化。

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

添加了class=puppy 属性以提高可读性。隐藏table 元素将是通用的且容易出错。

Javascript 更改

函数 showForm(选项){ //选项用户已选择。 var val = parseInt(option.value); //形成文档中的元素。 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";
     }
   }

}

现场演示@http://jsfiddle.net/A3eFz/31/

【讨论】：

【解决方案7】：

请尝试以下示例，希望对您有所帮助。

<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>

【讨论】：