Скрытые option в зависимых select не работают в Safari и IE
Добрый день, умные люди!
Очень прошу помощи. У заказчика на сайте нужен калькулятор с зависимыми select. При выборе в одном из общего кол-ва option выбираются нужные, а остальные скрываются. Написала код - прекрасно работает везде, кроме IE и Safari :wall: А где-то (по объяснениям заказчика не понимаю) выпадает список с выбранными нужными option, а ниже - ещё столько же "белой бумаги" (пустые селекты/пустые поля ??). Сам код
<div class="calk_form">
<div class="form">
<select name="calc_city" id="calc_city" class="full" onchange="calc_tarif.disabled = !this.selectedIndex">
<option value="" disabled selected>Выберите город</option>
<option value="1" class="1">Люберцы</option>
<option value="1" class="1">Москва</option>
<option value="1" class="1">Московский</option>
<option value="2" class="2">Калуга</option>
<option value="3" class="3">Малоярославец</option>
<option value="4" class="4">Обнинск</option>
<option value="5" class="5">Орехово-Зуево</option>
</select>
<select name="calc_tarif" id="calc_tarif" class="full" disabled onchange="calc_proba.disabled = !this.selectedIndex">
<option value="" class="1">Программа кредитования</option>
<option value="" class="2">Программа кредитования</option>
<option value="" class="3">Программа кредитования</option>
<option value="" class="4">Программа кредитования</option>
<option value="" class="5">Программа кредитования</option>
<option value="1" class="1">7:40</option>
<option value="2" class="1">До получки</option>
<option value="3" class="1">Пенсионный</option>
<option value="4" class="1">Супер Ноль %</option>
<option value="5" class="1">Свои Люди</option>
<option value="1" class="2">7:40</option>
<option value="1" class="3">7:40</option>
<option value="1" class="4">7:40</option>
<option value="1" class="5">7:40</option>
<option value="3" class="2">Пенсионный</option>
<option value="3" class="3">Пенсионный</option>
<option value="4" class="4">Супер Ноль %</option>
<option value="5" class="2">Свои Люди</option>
<option value="5" class="3">Свои Люди</option>
<option value="5" class="4">Свои Люди</option>
<option value="5" class="5">Свои Люди</option>
</select>
<div class="clearfix">
<select name="calc_proba" id="calc_proba" class="mini" disabled>
<option value="" class="1">Проба</option>
<option value="" class="2">Проба</option>
<option value="" class="3">Проба</option>
<option value="" class="4">Проба</option>
<option value="" class="5">Проба</option>
<option value="770" class="1">Au 375</option>
<option value="850" class="2">Au 375</option>
<option value="770" class="3">Au 375</option>
<option value="500" class="4">Au 375</option>
<option value="770" class="5">Au 375</option>
<option value="1200" class="1">Au 500</option>
<option value="1250" class="2">Au 500</option>
<option value="1000" class="3">Au 500</option>
<option value="700" class="4">Au 500</option>
<option value="1000" class="5">Au 500</option>
<option value="1450" class="1">Au 583</option>
<option value="1500" class="2">Au 583</option>
<option value="1200" class="3">Au 583</option>
<option value="1000" class="4">Au 583</option>
<option value="1200" class="5">Au 583</option>
<option value="1550" class="1">Au 585</option>
<option value="1550" class="2">Au 585</option>
<option value="1450" class="3">Au 585</option>
<option value="1200" class="4">Au 585</option>
<option value="1450" class="5">Au 585</option>
<option value="1850" class="1">Au 750</option>
<option value="1850" class="2">Au 750</option>
<option value="1840" class="3">Au 750</option>
<option value="1600" class="4">Au 750</option>
<option value="1840" class="5">Au 750</option>
<option value="2000" class="1">Au 850</option>
<option value="2000" class="2">Au 850</option>
<option value="1930" class="3">Au 850</option>
<option value="1620" class="4">Au 850</option>
<option value="1930" class="5">Au 850</option>
<option value="2050" class="1">Au 900</option>
<option value="2050" class="2">Au 900</option>
<option value="1960" class="3">Au 900</option>
<option value="1650" class="4">Au 900</option>
<option value="1960" class="5">Au 900</option>
<option value="2200" class="1">Au 999</option>
<option value="2200" class="2">Au 999</option>
<option value="2060" class="3">Au 999</option>
<option value="1700" class="4">Au 999</option>
<option value="2060" class="5">Au 999</option>
<option value="10" class="1">Ag 830/875</option>
<option value="10" class="2">Ag 830/875</option>
<option value="10" class="3">Ag 830/875</option>
<option value="10" class="4">Ag 830/875</option>
<option value="10" class="5">Ag 830/875</option>
<option value="15" class="1">Ag 925</option>
<option value="15" class="2">Ag 925</option>
<option value="15" class="3">Ag 925</option>
<option value="15" class="4">Ag 925</option>
<option value="15" class="5">Ag 925</option>
</select>
<input id="calc_weight" class="mini" placeholder="Вес в граммах">
</div>
</div>
<div class="result">
<p id="calc_error"></p>
<p id="val_info" >Особые условия: <strong><span></span></strong></p>
<p id="val1" >Оценка: <strong><span>0</span> РУБ.</strong></p>
<p id="val2">Процентная ставка (в день): <strong><span>0</span>%</strong></p>
<p id="val3">Сумма к возврату через месяц (30 дней): <strong><span></span>* РУБ.</strong></p>
<p id="val4">Процент за месяц (30 дней): <strong><span></span> РУБ.</strong></p>
<p id="val_m" class="mini">* возможны изменения тарифных планов (уточнять информацию по телефону или в отделении ломбарда).</p>
</div>
<div class="submit" align="center">
<button id="calc_succes">Рассчитать сумму</button>
</div>
</div>
JS не хочет вставлять - ругается. https://jsfiddle.net/o1hh09bw/ Подключена <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Катенька,
как спрятать option? ==> удалить!!! было
calc_city.change(function(event){
var type = $(event.target).val();
$('#calc_proba option').each(function(id, option){
option = $(option);
if(option.attr('class')==type){
option.toggleOption(true);
}else{
option.toggleOption(false);
}
})
});
ниже возможный варант
var op_proba = $('#calc_proba option');
calc_city.change(function(event){
var type = this.value;
$('#calc_proba')[0].options.length = 0;
op_proba.each(function(id, option){
option = $(option);
if(option.attr('class')==type){
option.appendTo("#calc_proba")
}})
});
|
| Часовой пояс GMT +3, время: 14:40. |