从onchange值显示多个div或具有相同id的表内容

Question

I'd like to know if you can display more than one div or table content of same id from onchange value. Like if I select an option from drop down and it displays its content but i want to display another content from elsewhere in my page when same option is selected.

My code is as follows:

<select name="debitOrderType" id = "debitOrderType" 
onChange="display(this,'BANK','CARD','INVOICE');">
<option>Please select...</option>
<option value="BANK" selected>Debit Order (Monthly)</option>
<option value="CARD">Credit Card (Monthly)</option>
<option value="INVOICE">Invoice (Yearly)</option>
</select>

Then when selecting Invoice from dropdown it displays the following:

<tbody id="INVOICE" style="display: none;">
<tr>
<td class="field">Thank you for selecting to pay yearly in advance. By doing so you 
are receiving one month's free listing.
</td></tr>
</tbody>

But now i want to display the following ALSO when Invoice is selected but in another part of the page:

<tbody id="INVOICE" style="display: none;">
<tr><td height="5"></td></tr>
<tr><td align="right">This is your discounted yearly price</td></tr>  
</tbody>

But only the first part is showing and not both. It looks like you can't display more than one content from same Id.

Hope you can help me?

Thanks in advance!

Answer 1

You mustn't define two elements with the same id in HTML, it's meant to be a unique identifier. Classes can be used multiple times, so use that!

Answer 2

First of all it is bed practice to assign same id to more than one element, although DOM will never find 2nd element of same id. Assign class to both table and make it visible on onChange event of combo box, then it will work.

Answer 3

If you want to display or apply css on single object then you should use ID . And if you want to display or apply css on multiple object then you should use CLASS .

In your example you should avoid ID and use class.

avoid this

 id="INVOICE" 

Use this

class="INVOICE"

Hope it will help you.