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;"を 2 番目のテーブルに追加します

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>
于 2013-01-18T17:48:31.730 に答える
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

次のようなことができます。

最初のオプションを選択すると最初のテーブルが表示され、2 番目のオプションでは両方のテーブルが表示されます。

$("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

私はあなたのコードを修正しました...それは今働いています...これを試してください...

<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("子犬");

  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 に答える