Javascript 基于下拉选择隐藏输入框_Javascript_Jquery

Javascript 基于下拉选择隐藏输入框

javascript jquery

Javascript 基于下拉选择隐藏输入框,javascript,jquery,Javascript,Jquery,我希望在页面顶部有一个下拉菜单，以确定页面上显示多少框如果用户选择1，则仅显示1个表如果用户选择2，将显示2个表我添加了代码，希望它更有意义 <body> <p>Please select number of puppies:</p> <p> <select> <option value="1">1</option> <o

我希望在页面顶部有一个下拉菜单，以确定页面上显示多少框

如果用户选择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>


请选择小狗数量：

1.
2.

小狗1：

姓名：
颜色：
性别:
男性
女性
微芯片/DNA档案：
不
微芯片
DNA图谱
微芯片/DNA编号：
小狗2：
姓名：
颜色：
性别:
男性
女性
微芯片/DNA档案：
不
微芯片
DNA图谱
微芯片/DNA编号：

您可以执行以下操作：

当您选择第一个选项时，它将显示第一个表，第二个选项将显示两个表

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

假设选项1应该显示表1，选项2显示表1和表2，以此类推

试试这个：

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

    var dropdown = $(this);

    var tables = $('.tableSelector');

    tables.hide();

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

工作区：

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

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

我已经修改了您的代码。。。它正在工作。。。试试这个

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


样品
函数go（）
{
var Count=document.getElementById（“selCount”）.options[document.getElementById（“selCount”）.selectedIndex].value；
如果（计数=1）
{
document.getElementById（“Puppy1”）.style.display=''；
document.getElementById（“Puppy2”）.style.display='none'；
}
如果（计数=2）
{
document.getElementById（“Puppy1”）.style.display=''；
document.getElementById（“Puppy2”）.style.display=''；
}
}
请选择小狗数量：

1.
2.

小狗1：

姓名：
颜色：
性别:
男性
女性
微芯片/DNA档案：
不
微芯片
DNA图谱
微芯片/DNA编号：
小狗2：
姓名：
颜色：
性别:
男性
女性
微芯片/DNA档案：
不
微芯片
DNA图谱
微芯片/DNA编号：

jsiddle: 获取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";
    }

}

但是，您也可以使用下面的内容，因为您的文档中可能有更多的select和table元素

请选择小狗数量：

1.
2.

小狗1：

姓名：
颜色：
性别:
男性
女性
微芯片/DNA档案：
不
微芯片
DNA图谱
微芯片/DNA编号：
小狗2：
姓名：
颜色：
性别:
男性
女性
微芯片/DNA档案：
不
微芯片
DNA图谱
微芯片/DNA编号：

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


功能显示表（o）{
如果（o.value==2）{document.getElementById（'table2'）.style.display='block'；}
else{document.getElementById（'table2'）.style.display='none'；}
}
请选择小狗数量：

1.
2.

HTML更改

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

}

现场演示@

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

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

请选择参数编号

0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
$（文档）.ready（函数（）{
$（'#amount'）。更改（函数（）{
$（“#组”）.empty（）；
var组=“”；
var number=parseInt（$（this.val（））；
对于（var i=0；i）您是否尝试过任何方法？有几种方法可以做到这一点……您只添加了表代码
<select onchange="showForm(this.options[this.selectedIndex]);">

<table width="330" border="0" class="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";
     }
   }

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