1

選択ドロップダウンから選択されたときに特定のテーブルを表示したい。これはこれまでのところですが、機能していません

JavaScript;

var opt = document.getElementById('select');

opt.onchange = function() {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';

html

<select name="select" id="select">
<option selected="selected" disabled="disabled">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>


<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>

<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>

<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>    

<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>

ページロード時にテーブルが非表示になり、関連するオプションが選択されたときに表示される理由がわかりません。

4

4 に答える 4

0

ここでの問題は、ページロード時にデフォルトのオプションが選択されていることです。したがって、ページロード時に onchange ハンドラーが「選択してください」という値で起動されます。これにより、すべてのテーブルが非表示になり、document.getElementById('tPleaseSelect')見つからないため、テーブルが表示されません。

于 2013-11-12T13:38:06.787 に答える
0

ページの読み込み時にテーブルを表示するフィドルが機能しています。次に、テーブルの 1 つを選択すると、そのテーブルだけが表示されます。上記のコードは、 close が欠落しているという事実に加えて、正常に機能します};。

ここでフィドル

于 2013-11-12T13:38:18.433 に答える