Здравствуйте. У меня аналогичная задача. Надо сделать таблицу из четырех колонок, в трех из которых будет отображаться информация в зависимости от выбранного select`а.
Часть кода страницы:
<table class="table_header" border="0">
<tbody>
<tr>
<td> </td>
<td>
<div>
<select onChange="Selected(this)">
<option value="1" selected="selected">Выберите комплектацию</option>
<option value="2">LT 1.6 AT Base</option>
<option value="3">LT 1.6 AT Comfort Pack</option>
<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
<option value="6">LTZ 1.6 AT</option>
</select>
</div>
</td>
<td>
<div>
<select aria-required="true" onChange="Selectedb(this)">
<option value="1">Выберите комплектацию</option>
<option value="2">LT 1.6 AT Base</option>
<option value="3">LT 1.6 AT Comfort Pack</option>
<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
<option value="6">LTZ 1.6 AT</option>
</select>
</div>
</td>
<td>
<div>
<select aria-required="true" onChange="Selectedc(this)">
<option value="1">Выберите комплектацию</option>
<option value="2">LT 1.6 AT Base</option>
<option value="3">LT 1.6 AT Comfort Pack</option>
<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
<option value="6">LTZ 1.6 AT</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
<div class="hideWrap">
<a class="hideBtn" title="Показать\Скрыть блок" href="javascript://">Характеристики</a>
<div class="hideCont">
<table class="harakt" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>
<div name="label1" style="display:none;"> </div>
<div name="label2" style="display:none;">LT 1.6 AT Base</div>
<div name="label3" style="display:none;">LT 1.6 AT Comfort Pack</div>
<div name="label4" style="display:none;">LT 1.6 AT Alloy Wheels Pack</div>
<div name="label5" style="display:none;">LT 1.6 AT Comfort and Alloy Wheels Pack</div>
<div name="label6" style="display:none;">LTZ 1.6 AT</div>
</td>
<td>
<div name="labela1" style="display:none;"> </div>
<div name="labela2" style="display:none;">LT 1.6 AT Base</div>
<div name="labela3" style="display:none;">LT 1.6 AT Comfort Pack</div>
<div name="labela4" style="display:none;">LT 1.6 AT Alloy Wheels Pack</div>
<div name="labela5" style="display:none;">LT 1.6 AT Comfort and Alloy Wheels Pack</div>
<div name="labela6" style="display:none;">LTZ 1.6 AT</div>
</td>
<td>
<div name="labelb1" style="display:none;"> </div>
<div name="labelb2" style="display:none;">LT 1.6 AT Base</div>
<div name="labelb3" style="display:none;">LT 1.6 AT Comfort Pack</div>
<div name="labelb4" style="display:none;">LT 1.6 AT Alloy Wheels Pack</div>
<div name="labelb5" style="display:none;">LT 1.6 AT Comfort and Alloy Wheels Pack</div>
<div name="labelb6" style="display:none;">LTZ 1.6 AT</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Трансмиссия </td>
<td>
<div name="label1" style="display:none;"> </div>
<div name="label2" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="label3" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="label4" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="label5" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="label6" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
</td>
<td>
<div name="labela1" style="display:none;"> </div>
<div name="labela2" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labela3" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labela4" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labela5" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labela6" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
</td>
<td>
<div name="labelb1" style="display:none;"> </div>
<div name="labelb2" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labelb3" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labelb4" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labelb5" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
<div name="labelb6" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
</td>
</tr>
Сам javascript
:
function Selected(a) {
var label = a.value;
if (label==1) {
document.getElementsByName("label1").style.display='block';
document.getElementsByName("label2").style.display='none';
document.getElementsByName("label3").style.display='none';
document.getElementsByName("label4").style.display='none';
document.getElementsByName("label5").style.display='none';
document.getElementsByName("label6").style.display='none';
} else if (label==2) {
document.getElementsByName("label1").style.display="none";
document.getElementsByName("label2").style.display="block";
document.getElementsByName("label3").style.display='none';
document.getElementsByName("label4").style.display='none';
document.getElementsByName("label5").style.display='none';
document.getElementsByName("label6").style.display='none';
} else if (label==3) {
document.getElementsByName("label1").style.display='none';
document.getElementsByName("label2").style.display='none';
document.getElementsByName("label3").style.display='block';
document.getElementsByName("label4").style.display='none';
document.getElementsByName("label5").style.display='none';
document.getElementsByName("label6").style.display='none';
} else if (label==4) {
document.getElementsByName("label1").style.display='none';
document.getElementsByName("label2").style.display='none';
document.getElementsByName("label3").style.display='none';
document.getElementsByName("label4").style.display='block';
document.getElementsByName("label5").style.display='none';
document.getElementsByName("label6").style.display='none';
} else if (label==5) {
document.getElementsByName("label1").style.display='none';
document.getElementsByName("label2").style.display='none';
document.getElementsByName("label3").style.display='none';
document.getElementsByName("label5").style.display='block';
document.getElementsByName("label4").style.display='none';
document.getElementsByName("label6").style.display='none';
} else if (label==6) {
document.getElementsByName("label1").style.display='none';
document.getElementsByName("label2").style.display='none';
document.getElementsByName("label3").style.display='none';
document.getElementsByName("label6").style.display='block';
document.getElementsByName("label5").style.display='none';
document.getElementsByName("label4").style.display='none';
} else {
document.getElementsByName("label1").style.display='block';
document.getElementsByName("label2").style.display='none';
document.getElementsByName("label3").style.display='none';
document.getElementsByName("label4").style.display='none';
document.getElementsByName("label5").style.display='none';
document.getElementsByName("label6").style.display='none';
}
}
Для каждого select`а меняется только название функции и названия атрибута name.
При выполненни функции FireBag выдает TypeError: document.getElementsByName(...).style is undefined.
Помогите пожалуйста решить проблемму.