05.01.2017, 16:37
|
|
Аспирант
|
|
Регистрация: 22.02.2016
Сообщений: 98
|
|
|
Один блок скрыть, другой отобразить.
Здравствуйте. Имеется такой код.
|
Код:
|
<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"> За ранее благодарю.
|
|
05.01.2017, 16:47
|
|
Аспирант
|
|
Регистрация: 22.02.2016
Сообщений: 98
|
|
|
У меня в данный момент ничего не отображается после клика по value="255"
|
|
06.01.2017, 09:24
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
Salvat, начнем с того, что у тебя ИД на странице не уникален... 
|
|
07.01.2017, 14:04
|
|
Аспирант
|
|
Регистрация: 22.02.2016
Сообщений: 98
|
|
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". Будьте добры, укажите на ошибку.
|
|
07.01.2017, 17:54
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Нельзя на странице указывать одинаковые идентификаторы элементам, в противном случае скрипт будет находить только первый из них. Вам же об этом, уже сказали, но вы упорно указываете id="kvar" четырем элементам.
|
|
07.01.2017, 18:08
|
|
Аспирант
|
|
Регистрация: 22.02.2016
Сообщений: 98
|
|
|
laimas, как тогда быть, прописывать их каждый id="kvar1", id="kvar2" ? А если у меня их очень много и это только часть всего кода?
|
|
07.01.2017, 18:12
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Salvat
|
|
как тогда быть, прописывать их каждый id="kvar1", id="kvar2" ? А если у меня их очень много и это только часть всего кода?
|
А они так необходимы? К тому же по условию - выбор в списке должен открыть блок в котором есть номер равный выбранной опции. |
|
07.01.2017, 18:16
|
|
Аспирант
|
|
Регистрация: 22.02.2016
Сообщений: 98
|
|
Сообщение от laimas
|
|
А они так необходимы? К тому же по условию - выбор в списке должен открыть блок в котором есть номер равный выбранной опции.
|
Да, необходимы. Допустим, клик по 250 открывает блок под ID 250, под id 8 должен блок скрыться. При клике по 251 открывается блок 251, а 250 и другие должны быть скрыты. |
|
07.01.2017, 18:33
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Salvat
|
|
Да, необходимы. Допустим, клик по 250 открывает блок под ID 250, под id 8 должен блок скрыться.
|
И какое отношение идентификатор kvar имеет к идентификатору 250, если у вас такая верстка:
<div id="kvar">
<div id="250">
...?
Я могу вообще не указывать никаких id блокам, и что у меня там в опциях указано будет ровно наплевать, и тем не менее смогу спокойно управлять ими посредством списка.
Значения опций списка чисто для сервера, а блоки которыми нужно управлять помещу в один родительский блок, которому единственному укажу идентификатор для доступа к нему. Главное что нужно соблюдать при выводе страницы, так это равенство опций списка и блоков связанных с ними, а также их последовательность в родительском блоке - согласно последовательности связанных с ними опций в списке.
Опции в списке это набор элементов, то есть имеющих индекс от 0 до ... Вложенные блоки в родительском элементе тоже набор, тоже имеющий индексы от 0 до ... Дальше рассказывать как можно получать нужный блок в зависимости от выбранной опции?
|
|
07.01.2017, 18:47
|
|
Аспирант
|
|
Регистрация: 22.02.2016
Сообщений: 98
|
|
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>
Но так не работает.
|
|
|
|
