Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.10.2017, 12:17
Новичок на форуме
Отправить личное сообщение для Катенька Посмотреть профиль Найти все сообщения от Катенька
 
Регистрация: 05.10.2017
Сообщений: 1

Скрытые 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>
Ответить с цитированием
  #2 (permalink)  
Старый 05.10.2017, 13:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Катенька,
как спрятать 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")
  }})
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
select - большое количество option kot_k_k (X)HTML/CSS 3 08.09.2017 16:34
Содержимое option по клику на select wwonder Общие вопросы Javascript 5 18.04.2017 14:12
Значение из select option vnmslf jQuery 19 21.07.2016 12:09
Подправьте скрипт, в одну строчку :)(Выбор Option в динамическом Select) ScribaXXI Общие вопросы Javascript 1 10.02.2016 07:32
Java Script, совместная работа textarea с select option Алекс_ Элементы интерфейса 1 12.05.2015 08:13