根据下拉选择隐藏输入框

时间：2013-01-18 17:32:22

标签： javascript jquery

我想在页面顶部有一个下拉菜单，以确定页面上显示的框数。

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

7 个答案:

答案 0 :(得分：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";
    }

}

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

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>

答案 1 :(得分：0)

您可以这样做：

当你选择第一个选项时，它会显示你的firSt表，而对于第二个选项，它会显示两个表。

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

答案 2 :(得分：0)

鉴于选项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 :(得分：0)

我修改了你的代码......它现在正在运行......试试这个... 

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

答案 4 :(得分：0)

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

答案 5 :(得分：0)

HTML更改 

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

为什么需要它？

用于收听选择框值的更改。

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

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

Javascript更改

function showForm（option）{      //选项用户已选中。       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/

答案 6 :(得分：0)

请尝试以下示例，希望这会有所帮助。

<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>
相关问题
最新问题