Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Один блок скрыть, другой отобразить. (https://javascript.ru/forum/dom-window/66719-odin-blok-skryt-drugojj-otobrazit.html)

Salvat 05.01.2017 16:37

Один блок скрыть, другой отобразить.
 
Здравствуйте. Имеется такой код.
Код:

<meta charset="UTF-8">
 <script type="text/javascript" src="js/jquery-1.5.1.min.js "></script> 
<script> 
  $(document).ready(function() {
 
        $('#kvar div').css('display','none');       
 
        $("#view_type").change(function(){                     
            $('#kvar div').css('display','none'); 
       
            id = $('#view_type option:selected').val();   
            $('#'+id).show();                               
        });
 
    });
    </script>
 
    <div id="kvar">
    <div id="28">
    <select name='type[]' id="view_type">
        <option value='249'>Продам</option>
        <option value='250'>Сдам</option>
        <option value='251'>Куплю</option>
        <option value='255'>Сниму</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="kvar">
    <div id="255">
    <select name='type[]' id="view_type">
        <option value='249' >Продам</option>
        <option value='250'>Сдам</option>
        <option value='251'>Куплю</option>
        <option value='252'>Сниму</option>
    </select>
    </div>
</div>

Подскажите пожалуйста, как реализовать, если клик произошел по option value="255", тогда блок первый должен скрываться, а второй отобразиться <div id="255"> За ранее благодарю.

Salvat 05.01.2017 16:47

У меня в данный момент ничего не отображается после клика по value="255"

ksa 06.01.2017 09:24

Salvat, начнем с того, что у тебя ИД на странице не уникален... :no:

Salvat 07.01.2017 14:04

ksa,
Я изменил
<div id="kvar">

	<div id="8">
	<select name='type[]' id="view_type">
		<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="kvar">
	<div id="249">
	<select name='type[]' id="view_type">
		<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="kvar">
	<div id="250">
	<select name='type[]'  id="view_type">
		<option value='249'>Продам</option>
		<option value='250' >Сдам</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>

<div id="kvar">
	<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>

При клике option value="8" открывается div id="kvar" с <div id="249"> При клике же по <option value='250'> скрипт не срабатывает и не открывает блок с id="250". Будьте добры, укажите на ошибку.

laimas 07.01.2017 17:54

Нельзя на странице указывать одинаковые идентификаторы элементам, в противном случае скрипт будет находить только первый из них. Вам же об этом, уже сказали, но вы упорно указываете id="kvar" четырем элементам.

Salvat 07.01.2017 18:08

laimas, как тогда быть, прописывать их каждый id="kvar1", id="kvar2" ? А если у меня их очень много и это только часть всего кода?

laimas 07.01.2017 18:12

Цитата:

Сообщение от Salvat
как тогда быть, прописывать их каждый id="kvar1", id="kvar2" ? А если у меня их очень много и это только часть всего кода?

А они так необходимы? К тому же по условию - выбор в списке должен открыть блок в котором есть номер равный выбранной опции.

Salvat 07.01.2017 18:16

Цитата:

Сообщение от laimas (Сообщение 439951)
А они так необходимы? К тому же по условию - выбор в списке должен открыть блок в котором есть номер равный выбранной опции.

Да, необходимы. Допустим, клик по 250 открывает блок под ID 250, под id 8 должен блок скрыться. При клике по 251 открывается блок 251, а 250 и другие должны быть скрыты.

laimas 07.01.2017 18:33

Цитата:

Сообщение от Salvat
Да, необходимы. Допустим, клик по 250 открывает блок под ID 250, под id 8 должен блок скрыться.

И какое отношение идентификатор kvar имеет к идентификатору 250, если у вас такая верстка:

<div id="kvar">
<div id="250">
...?

Я могу вообще не указывать никаких id блокам, и что у меня там в опциях указано будет ровно наплевать, и тем не менее смогу спокойно управлять ими посредством списка.

Значения опций списка чисто для сервера, а блоки которыми нужно управлять помещу в один родительский блок, которому единственному укажу идентификатор для доступа к нему. Главное что нужно соблюдать при выводе страницы, так это равенство опций списка и блоков связанных с ними, а также их последовательность в родительском блоке - согласно последовательности связанных с ними опций в списке.

Опции в списке это набор элементов, то есть имеющих индекс от 0 до ... Вложенные блоки в родительском элементе тоже набор, тоже имеющий индексы от 0 до ... Дальше рассказывать как можно получать нужный блок в зависимости от выбранной опции?

Salvat 07.01.2017 18:47

laimas,
Если я правильно Вас понял, тогда получается так?
<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 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>	</div>

Но так не работает.

laimas 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 07.01.2017 19:17

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

Salvat 07.01.2017 19:32

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

laimas 07.01.2017 19:36

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

Salvat 07.01.2017 19:45

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

laimas 07.01.2017 20:22

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

Salvat 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 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 07.01.2017 20:31

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

Salvat 07.01.2017 20:32

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

laimas 08.01.2017 04:17

Лучше бы я промолчал.

1) $(document).ready это событие готовности DOM, зачем же его прописывать для установки каждого обработчика? При этом они у вас еще и вложенные!

$(document).ready(function() {
    //здесь ВСЕ обработчики и прочий код, который должен выполнятся по наступлении этого события 
});
//или, что тоже самое 
$(function() {
   //здесь ВСЕ обработчики и прочий код, который должен выполнятся по наступлении этого события
});


2) У вас куча списков, а вы добросовестно скопировали код моего примера, а ведь $('select').change - определит этот обработчик для ВСЕХ списков. А что это означает? Если используете это решение для управления блоками списком id="view_type", то:

$('#view_type').change(function() {
        $('#kvars > div').hide().eq(this.selectedIndex).show()
})


Но почему при этом и сам список помещен в блок <div id="kvars">? А используя управление по индексу, зачем сохраняете id у блоков?

3) Что за мазохизм в строках кода типа $('#markatype div').css('display','none'); повторяющее по несколько раз? Вообще есть CSS, а JS уже для динамического изменения стиля.

4) Чтобы распробовать суп не обязательно съесть всю кастрюлю, достаточно и нескольких ложек. Зачем выставлять такие портянки, если можно было основное из html показать, с минимумом "внутренностей".


Часовой пояс GMT +3, время: 00:44.