Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

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>

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


Часовой пояс GMT +3, время: 16:44.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице