2

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

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

7 回答 7

2

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>
于 2013-01-18T17:48:31.730 回答
0

你可以这样做：

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

$("table").hide();
$("select option").change(function(){
    Val = $(this).val();
     If(Val ==1) {
        $("table")[0].show();
        $("table")[1].hide();
      } else {
        $("table").show();
     }
});
于 2013-01-18T17:43:33.583 回答
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。

于 2013-01-18T17:45:59.767 回答
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>
于 2013-01-18T17:48:21.450 回答
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">
于 2013-01-18T17:49:58.857 回答
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/

于 2013-01-18T18:23:02.943 回答
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>
于 2014-01-17T16:35:05.363 回答