Вход

Просмотр полной версии : Не работает скрипт в Chrome


SuperTester
11.09.2015, 08:41
Есть скрипты:

function hidebyid(id){
var el = document.getElementById(id);
el.style.display='none';
}

function showbyid(id){
var el = document.getElementById(id);
el.style.display='inline-block';
}


имеем следующий код в форме заказа, который скрывает/отображает определенные select-ы:


<div class="row">
<label>Тип конструкции</label>
<select name="name_construction">
<option onClick="hidebyid('row_gazebo'); hidebyid('row_kozyrki'); hidebyid('row_kyrilki'); showbyid('row_canopy');">Навес</option>
<option onClick="hidebyid('row_canopy'); hidebyid('row_kozyrki'); hidebyid('row_kyrilki'); showbyid('row_gazebo');">Беседка</option>
<option onClick="hidebyid('row_canopy'); hidebyid('row_gazebo'); hidebyid('row_kyrilki'); showbyid('row_kozyrki');">Козырек</option>
<option onClick="hidebyid('row_canopy'); hidebyid('row_gazebo'); hidebyid('row_kozyrki'); showbyid('row_kyrilki');">Курилка</option>
<option onClick="hidebyid('row_canopy'); hidebyid('row_gazebo'); hidebyid('row_kozyrki'); hidebyid('row_kyrilki');">Гараж</option>
<option onClick="hidebyid('row_canopy'); hidebyid('row_gazebo'); hidebyid('row_kozyrki'); hidebyid('row_kyrilki');">Хоз. блок</option>
</select>
</div>


<div class="row" id="row_canopy">
<label>Название</label>
<select name="name_canopy">
<option>Круглый</option>
<option>Прямоугольный</option>
<option>Приставной</option>
<option>Квадратный</option>
<option>Навес над крыльцом</option>
<option>Рокстил</option>
<option>Мини навес</option>
<option>Раундруф</option>
</select>
</div>

<div class="row hidden" id="row_gazebo">
<label>Название</label>
<select name="name_gazebo">
<option>Прямоугольная</option>
<option>Круглая</option>
<option>Приставная</option>
<option>Квадратная</option>
<option>С лавочками</option>
</select>
</div>

<div class="row hidden" id="row_kozyrki">
<label>Название</label>
<select name="name_kozyrki">
<option>Атлас</option>
<option>Орион</option>
<option>Сириус</option>
<option>Сириус Лайн</option>
<option>Оран</option>
<option>Оран Р</option>
<option>Сол</option>
<option>Трим</option>
<option>Волна</option>
</select>
</div>

<div class="row hidden" id="row_kyrilki">
<label>Название</label>
<select name="name_kyrilki">
<option>Квадро</option>
<option>Стандарт</option>
</select>
</div>



По какой-то причине эта конструкция не работает в Google Chrome. Живой код - http://new.lnebo.ru/order/

Буду благодарен за помощь.

рони
11.09.2015, 09:07
option onClick
не делайте так!
есть select onchange=

SuperTester
11.09.2015, 10:02
Спасибо за подсказку, доработал. Посмотрите, пожалуйста, все ли верно. Немного громоздко получилось, но как смог:

function Selected(a) {
var label = a.value;
if (label==1) {
document.getElementById("row_canopy").style.display='block';
document.getElementById("row_gazebo").style.display='none';
document.getElementById("row_kyrilki").style.display='none';
document.getElementById("row_kozyrki").style.display='none';
} else if (label==2) {
document.getElementById("row_gazebo").style.display='block';
document.getElementById("row_canopy").style.display='none';
document.getElementById("row_kyrilki").style.display='none';
document.getElementById("row_kozyrki").style.display='none';
} else if (label==3) {
document.getElementById("row_kyrilki").style.display='block';
document.getElementById("row_canopy").style.display='none';
document.getElementById("row_gazebo").style.display='none';
document.getElementById("row_kozyrki").style.display='none';
} else if (label==4) {
document.getElementById("row_kozyrki").style.display='block';
document.getElementById("row_canopy").style.display='none';
document.getElementById("row_gazebo").style.display='none';
document.getElementById("row_kyrilki").style.display='none';
} else {
document.getElementById("row_canopy").style.display='none';
document.getElementById("row_gazebo").style.display='none';
document.getElementById("row_kyrilki").style.display='none';
document.getElementById("row_kozyrki").style.display='none';
}
}
<div class="row">
<label>Тип конструкции</label>
<select name="name_construction" onChange="Selected(this)">
<option value="1">Навес</option>
<option value="2">Беседка</option>
<option value="3">Козырек</option>
<option value="4">Курилка</option>
<option value="5">Гараж</option>
<option value="6">Хоз. блок</option>
</select>
</div>

рони
11.09.2015, 10:13
SuperTester,
все скрыть вначале -- потом открыть нужный по условию - глядишь на десяток строк короче будет

SuperTester
11.09.2015, 14:28
спасибо