Форум

laimas · #11 (**permalink**) 07.01.2017, 19:09

А чего тут должно работать если кода нет?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
#kvar > div:not(:first-child) {
    display: none;
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> 
$(function() {
    $('select').change(function() {
        $('#kvar > div').hide().eq(this.selectedIndex).show()
    })
});
</script> 
</head>
<body>
<select>
<option>Block 1</option>
<option>Block 2</option>
<option>Block 3</option>
</select>
<div id="kvar">
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
</div>
</body>
</html>

Это пример. Работает?

Salvat · #12 (**permalink**) 07.01.2017, 19:17

Блок kvar id=8 открывается за счет select'a другого, и так же kvar id=9 и так до сотни. 100 блоков. Я же привожу код именно kvar id=8, где в нем в зависимости от выбора должен открываться другой блок 250,251 и т.д. То есть, первоначально id="8" скрыт, потом открыт и видим код что я привожу.

Salvat · #13 (**permalink**) 07.01.2017, 19:32

laimas, спасибо большое, разобрался. С Рождеством

laimas · #14 (**permalink**) 07.01.2017, 19:36

До сотни блоков, это слишком, список из 100 опций прокрутить не самое удобное.

Salvat · #15 (**permalink**) 07.01.2017, 19:45

У меня некорректно почему-то работать стал скрипт. Открываю блок 2 допустим, и открывается блок 251 вместе с ним.

laimas · #16 (**permalink**) 07.01.2017, 20:22

Пример, который я показал будет корректно работать с произвольным числом элементов. Как вы там открываете я понятия не имею.

Salvat · #17 (**permalink**) 07.01.2017, 20:30

<select name="categorys_id" id="customerys_id" style="width:150px;margin-top:-35px; margin-left:360px;">
	   <option value="">Любая категория</option>
    <option value="1" style='font-weight: bold;'  >Транспорт</option>
     <option value="2" >Автомобили</option>
    <option value="3" >Мотоциклы и мототехника</option>
    <option value="4" >Грузовики и спецтехника</option>
    <option value="5" >Водный транспорт</option>
    <option value="6" >Запчасти и аксессуары</option>
     <option value="7" style='font-weight: bold;' >Недвижимость</option>
     <option value="8" >Квартиры</option>
    <option value="9" >Комнаты</option>
    <option value="10" >Дома, дачи, коттеджи</option>
    <option value="11" >Земельные участки</option>
    <option value="12" >Гаражи и машиноместа</option>
    <option value="13" >Коммерческая недвижимость</option>
    <option value="14" >Недвижимость за рубежом</option>
     <option value="15" style='font-weight: bold;' >Работа</option>
     <option value="16" >Вакансии</option>
    <option value="17" >Резюме</option>
     <option value="18" style='font-weight: bold;' >Услуги</option>
     <option value="19" >Предложение услуг</option>
    <option value="20" >Заказ услуг</option>
     <option value="21" style='font-weight: bold;' >Личные вещи</option>
     <option value="22" >Одежда, обувь, аксессуары</option>
    <option value="23" >Детская одежда и обувь</option>
    <option value="24" >Товары для детей и игрушки</option>
    <option value="25" >Часы и украшения</option>
    <option value="26" >Красота и здоровье</option>
     <option value="27" style='font-weight: bold;' >Для дома и дачи</option>
     <option value="28" >Бытовая техника</option>
    <option value="29" >Мебель и интерьер</option>
    <option value="30" >Посуда и товары для кухни</option>
    <option value="31" >Продукты питания</option>
    <option value="32" >Ремонт и строительство</option>
    <option value="33" >Растения</option>
     <option value="34" style='font-weight: bold;' >Бытовая электроника</option>
     <option value="35" >Аудио и видео</option>
    <option value="36" >Игры, приставки и программы</option>
    <option value="37" >Настольные компьютеры</option>
    <option value="38" >Ноутбуки</option>
    <option value="39" >Оргтехника и расходники</option>
    <option value="40" >Планшеты и электронные книги</option>
    <option value="41" >Телефоны</option>
    <option value="42" >Товары для компьютера</option>
    <option value="43" >Фототехника</option>
     <option value="44" style='font-weight: bold;' >Хобби и отдых</option>
     <option value="45" >Билеты и путешествия</option>
    <option value="46" >Велосипеды</option>
    <option value="47" >Книги и журналы</option>
    <option value="48" >Коллекционирование</option>
    <option value="49" >Музыкальные инструменты</option>
    <option value="50" >Охота и рыбалка</option>
    <option value="51" >Спорт и отдых</option>
     <option value="52" style='font-weight: bold;' >Животные</option>
     <option value="53" >Собаки</option>
    <option value="54" >Кошки</option>
    <option value="55" >Птицы</option>
    <option value="56" >Аквариум</option>
    <option value="57" >Другие животные</option>
    <option value="58" >Товары для животных</option>
     <option value="59" style='font-weight: bold;' >Для бизнеса</option>
     <option value="60" >Готовый бизнес</option>
    <option value="61" >Оборудование для бизнеса</option>
    </select><br/><br/>
     <input type="checkbox" name="only_subject" >Искать только в названиях
     <input type="checkbox" name="only_photo" >Только с фото<br/>
     <input type="text" name="name" placeholder="Название товара" style="width:87%;"/><br/><br/>
 

<div id="kvar">

	<div id="8">
	<select name='type[]' id="view_type">
		<option value="" selected="selected">Тип объявления</option>
		<option value='249'>Продам</option>
		<option value='250'>Сдам</option>
		<option value='251'>Куплю</option>
		<option value='252'>Сниму</option>
	</select>
	<select name='room[]' >
		<option value=''>Кол-во комнат</option>
		<option value='1'>1 комната</option>
		<option value='2'>2 комнаты</option>
		<option value='3'>3 комнаты</option>
		<option value='4'>4 комнаты</option>
		<option value='5'>5 комнат</option>
		<option value='6'>6 комнат</option>
		<option value='7'>7 комнат</option>
		<option value='8'>8 комнат</option>
		<option value='9'>9 комнат</option>
		<option value='10'>Студия</option>
	</select>

	<select name='view[]' >
		<option value=''>Вид объекта</option>
		<option value='1'>Новостройка</option>
		<option value='2'>Вторичка</option>
	</select>
		<br/>
			<br/>
Площадь: 
		<input  type="range" name='kvm[]' min="0" max="300" step="10" value="10" /> 
		<output for="jim">1</output> <b style="margin-left:850px;font-size:14px;">м²</b>
Этаж:
		<input  type="range" style="margin-left:27px;" name='flen[]' min="1" max="100" step="1" value="1" /> 
		<output for="jim">1</output> <b style="margin-left:850px;font-size:14px;">м²</b>

	<select name='type_house[]' >
		<option value=''>Тип дома</option>
		<option value='1'>Панельный</option>
		<option value='2'>Кирпичный</option>
		<option value='3'>Блочный</option>
		<option value='4'>Монолитный</option>
		<option value='5'>Деревянный</option>
	</select>
		</div>
			</div>
<div id="kvars">
	<div id="249">
	<select name='type[]' id="view_type">
		<option value='249' selected="selected">Продам</option>
		<option value='250'>Сдам</option>
		<option value='251'>Куплю</option>
		<option value='252'>Сниму</option>
	</select>
	<select name='room[]' >
		<option value=''>Кол-во комнат</option>
		<option value='1'>1 комната</option>
		<option value='2'>2 комнаты</option>
		<option value='3'>3 комнаты</option>
		<option value='4'>4 комнаты</option>
		<option value='5'>5 комнат</option>
		<option value='6'>6 комнат</option>
		<option value='7'>7 комнат</option>
		<option value='8'>8 комнат</option>
		<option value='9'>9 комнат</option>
		<option value='10'>Студия</option>
	</select>

	<select name='view[]' >
		<option value=''>Вид объекта</option>
		<option value='1'>Новостройка</option>
		<option value='2'>Вторичка</option>
	</select>
		<br/>
		<br/>
Площадь: 
		<input  type="range" name='kvm[]' min="0" max="300" step="10" value="10" /> 
		<output for="jim">1</output> <b style="margin-left:850px;font-size:14px;">м²</b>
Этаж:
		<input  type="range" style="margin-left:27px;" name='flen[]' min="1" max="100" step="1" value="1" /> 
		<output for="jim">1</output> <b style="margin-left:850px;font-size:14px;">м²</b>
	<select name='type_house[]' >
		<option value=''>Тип дома</option>
		<option value='1'>Панельный</option>
		<option value='2'>Кирпичный</option>
		<option value='3'>Блочный</option>
		<option value='4'>Монолитный</option>
		<option value='5'>Деревянный</option>
	</select>
		</div>

	<div id="250">
	<select name='type[]'  id="view_type">
		<option value='249'>Продам</option>
		<option value='250' selected='selected'>Сдам</option>
		<option value='251'>Куплю</option>
		<option value='252'>Сниму</option>
	</select>
	<select name="term[]">
		<option value=''>Срок аренды</option>
		<option value='1'>На длительный срок</option>
		<option value='2'>Посуточно</option>
	</select>
	<select name='room[]' >
		<option value=''>Кол-во комнат</option>
		<option value='1'>1 комната</option>
		<option value='2'>2 комнаты</option>
		<option value='3'>3 комнаты</option>
		<option value='4'>4 комнаты</option>
		<option value='5'>5 комнат</option>
		<option value='6'>6 комнат</option>
		<option value='7'>7 комнат</option>
		<option value='8'>8 комнат</option>
		<option value='9'>9 комнат</option>
		<option value='10'>Студия</option>
		</select>
		<br/>
			<br/>
Площадь: 
		<input  type="range" name='kvm[]' min="0" max="300" step="10" value="10" /> 
		<output for="jim">1</output> <b style="margin-left:850px;font-size:14px;">м²</b>
Этаж:
		<input  type="range" style="margin-left:27px;" name='flen[]' min="1" max="100" step="1" value="1" /> 
		<output for="jim">1</output> <b style="margin-left:850px;font-size:14px;">м²</b>
	<select name='type_house[]' >
		<option value=''>Тип дома</option>
		<option value='1'>Панельный</option>
		<option value='2'>Кирпичный</option>
		<option value='3'>Блочный</option>
		<option value='4'>Монолитный</option>
		<option value='5'>Деревянный</option>
	</select>
	</div>

	<div id="251">
	<select name='type[]'  id="view_type">
		<option value='249' >Продам</option>
		<option value='250'>Сдам</option>
		<option value='251' selected='selected'>Куплю</option>
		<option value='252'>Сниму</option>
	</select>
	<select name='room[]' >
		<option value=''>Кол-во комнат</option>
		<option value='1'>1 комната</option>
		<option value='2'>2 комнаты</option>
		<option value='3'>3 комнаты</option>
		<option value='4'>4 комнаты</option>
		<option value='5'>5 комнат</option>
		<option value='6'>6 комнат</option>
		<option value='7'>7 комнат</option>
		<option value='8'>8 комнат</option>
		<option value='9'>9 комнат</option>
		<option value='10'>Студия</option>
	</select>
	<br/>
		<br/>
	</div>


	<div id="252">
	<select name='type[]'  id="view_type">
		<option value='249'>Продам</option>
		<option value='250'>Сдам</option>
		<option value='251'>Куплю</option>
		<option value='252' selected="selected">Сниму</option>
	</select>
	<select name="term[]">
		<option value=''>Срок аренды</option>
		<option value='1'>На длительный срок</option>
		<option value='2'>Посуточно</option>
	</select>
	<select name='room[]' >
		<option value=''>Кол-во комнат</option>
		<option value='1'>1 комната</option>
		<option value='2'>2 комнаты</option>
		<option value='3'>3 комнаты</option>
		<option value='4'>4 комнаты</option>
		<option value='5'>5 комнат</option>
		<option value='6'>6 комнат</option>
		<option value='7'>7 комнат</option>
		<option value='8'>8 комнат</option>
		<option value='9'>9 комнат</option>
		<option value='10'>Студия</option>
	</select>
	<br/>
		<br/>
	</div>
</div>

Salvat · #18 (**permalink**) 07.01.2017, 20:30

И сам JS, часть блоков вырезана

$(document).ready(function() {
 
        $('#markatype div').css('display','none');        
        $('#kvars div').css('display','none');
        $("#customerys_id").change(function(){                  
            $('#markatype div').css('display','none');  
		$('#markaauto div').css('display','none'); 
		                $('#kvar div').css('display','none');          
		           
            id = $('#customerys_id option:selected').val();    
            $('#'+id).show();                               
        });
 
    });
    $(document).ready(function() {
 
        $('#markaauto div').css('display','none');         
       $('#kvar div').css('display','none'); 
        $("#automarka").change(function(){                      
            $('#markaauto div').css('display','none');  
		
            id = $('#automarka option:selected').val();    
            $('#'+id).show();                                 
        });
 
    });
        $(document).ready(function() {
 
        $('#kvar div').css('display','none');         
   
         $('#kvars div').css('display','none');
    $(document).on("change","#view_type",function(event){                   
        
	         $('#kvars div').css('display','none');	
            id = $('#view_type option:selected').val();    
            $('#'+id).show();                                 
        });
 
    });
    $(function() {
    $('select').change(function() {
        $('#kvars > div').hide().eq(this.selectedIndex).show()
    })
});

При клике "Квартиры" откроется блок, при клике сдам должен открываться другой блок, продам другой. Часть JS относится к другому блоку, он пока не важен.

Salvat · #19 (**permalink**) 07.01.2017, 20:31

Так вот, блок открывается при клике сдам, но блок продам тоже висит открытый.

Salvat · #20 (**permalink**) 07.01.2017, 20:32

А при клике на другие пункты первого select'a должен скрываться kvar блок

Форум

Справочник

Discord чат

Курсы javascript