Перейти к публикации
jakal

Javascript Смена классов при клике на элемент списка

Рекомендованные сообщения

jakal

День добрый!

Понадобилась такая функция: при клике на элемент списка, что бы происходила смена классов.

В интернете что то не могу найти решение (: есть к примеру, смена id какого то тега, но я к тегу привязываться не хочу, что бы эта функция не применялась к другим таким же тегам, которые находятся рядом.

 

К примеру, есть у нас список

<select>
	<option id="odin">Первый</option>
	<option id="dva">Второй</option>
</select>

<!-- Далее идет выбор списка, который будет отображаться, исходя выбора в списке выше -->
<select class="ydajaem">
        <option></option>
</select>

<select class="odin">
	<option>Он</option>
	<option>Она</option>
</select>

<select class="dva">
	<option>Белый</option>
	<option>Черный</option>
</select>

То есть нужно, что бы отображался нужный второй список, к примеру выбираем элемент "Первый" и нам отображается список "odin"

Себе представляю это так, имеем такие стили:

 

.ydajaem {display:inline-block;}
.ydajaemhidden {display:none;}
.odin {display:none;}
.odinshow {display:inline-block;}
.dva {display:none;}
.dvashow {display:inline-block;}

Так вот при выборе этого элемента списка <option id="odin">Первый</option>, этот стиль ydajaem должен изменится на этот ydajaemhidden, и одновременно этот odin, должен изменится на этот odinshow, с другим элементом аналогично!

 

То есть по сути получается, заменяем пустой список на заполненный и причем нужный нам.

 

Помогите пожалуйста, такое воплотить на jQuery !)



Чет не получается и все!(

   $('#odin').click(function(){
      $('.odin').removeClass('odin').addClass('odinshow');
      $(this).removeClass('odinshow').addClass('odin');
   });

Гуру js подскажите плиз, что не так в коде (помогите, правильно написать), вроде все логически просто с этим js, но что то не получается (

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Вроде, таким макаром удалось решить

$(document).ready(function() {
 $('#poisksayta').change(function(){
var viborElement = $('#poisksayta :selected').attr('id');
if(viborElement=='odin'){
 $('#colorsel span').css('display','block');	
 }
 
if(viborElement=='odin'){
$('#colorsel span').css('display','none');
 $('#ibvwatch').css('display','block');	
 }
  
if(viborElement=='dva'){
$('#colorsel span').css('display','none');
 $('#ibwatch').css('display','block');	
 } 
 
 });    
});

Но пока что не понятно, чего сразу два списка отображается, а когда переключаю то становится один (как положено), в общем надо еще шаманить с изначальным состоянием.



Не знаю, что ему сделать что бы отображал только то что выберу ((

Вот вся демка, может кто поймет, как сделать что бы изначально не отображалось два списка?

 

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.vibir').change(function(){
var viborElement = $('.vibir :selected').attr('id');
 
if(viborElement=='vibor1'){
$('#inir select').css('display','none');
 $('#inircv1').css('display','block');	
 }
  
if(viborElement=='vibor2'){
$('#inir select').css('display','none');
 $('#inircv2').css('display','block');	
 } 
 
if(viborElement=='vibor3'){
$('#inir select').css('display','none');
 $('#inircv3').css('display','block');	
 } 
 });    
});
</script>
<style>

</style>
</head>
<body>

	<div>
	<select class="vibir" name="sort"  id="vibor">
		<option value="">---Выберите сорт---</option>
		<option id="vibor1" value="Высокие бородатые">Высокие бородатые</option>
		<option id="vibor2" value="Бордюрные">Бордюрные</option>
		<option id="vibor3" value="Карлики">Карлики</option>
        <option value="Высокие миниатюрные">Высокие миниатюрные</option>
        <option value="Интермедия">Интермедия</option>
	</select>
	<div id="inir">
	<select id="inircv1" name="cvetibv">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Черный</option>
		<option value="2">Красный</option>
		<option value="3">Зеленый</option>
	</select>
	<select id="inircv2" name="cvetibv">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Серый</option>
		<option value="2">Желтый</option>
		<option value="3">Малиновый</option>
	</select>
	</div>
	<input type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
	<input type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />
	<select name="letter-namerusibv">
		<option value="">---Первая буква в названии---</option>
		<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
		<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
		<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
		<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
		<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
		<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
		<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
		<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
		<option value="Я">Я</option>
	</select>
	</div>

</body>
</html>

 

 

jquery думаю найдете откуда подключить.

Заранее благодарю за помощь, потому как все что мог я собрал, а дальше не пойму в чем загвоздка!



Пример брал отсюда

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

так по моему лучше... (хотя я не тестил, но вроде все правильно...)

 

$('.vibir').change(function(){
var viborElement = $('.vibir :selected').attr('id');

function(){
	$('#inir select').css('display','none');
	$('.'+viborElement).css('display','block');
};
});


<select class="vibor1" name="cvetibv">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Черный</option>
		<option value="2">Красный</option>
		<option value="3">Зеленый</option>
	</select>
	<select class="vibor2" name="cvetibv">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Серый</option>
		<option value="2">Желтый</option>
		<option value="3">Малиновый</option>
	</select>
	</div>
	<input type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
	<input type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />
	<select name="letter-namerusibv">
		<option value="">---Первая буква в названии---</option>
		<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
		<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
		<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
		<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
		<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
		<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
		<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
		<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
		<option value="Я">Я</option>
	</select>

 

завтра или после завтра если лень не будет то напишу полностью автономный скрипт без id или class

Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Не, так списки совсем не прячутся, то есть сразу отображается два варианта.

Спасибо, что не отказываете в помощи!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

затупил малость 

 

 

$(document).ready(function() {
$('#inir select').css('display','none');
$('.vibir').change(function(){
  var viborElement = $('.vibir :selected').attr('id');
  $('#inir select').css('display','none');
  $('.'+viborElement).css('display','block');
}); 
});

<select class="vibor1" name="cvetibv">
  <option value="">---Выберите цвет(а)---</option>
  <option value="1">Черный</option>
  <option value="2">Красный</option>
  <option value="3">Зеленый</option>
</select>
<select class="vibor2" name="cvetibv">
  <option value="">---Выберите цвет(а)---</option>
  <option value="1">Серый</option>
  <option value="2">Желтый</option>
  <option value="3">Малиновый</option>
</select>

 

Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Так тоже не работает, в последнем варианте, при выборе первого элемента списка, открываются сразу два других списка (

Может я не так составляю html ?

Напишите пожалуйста, вcю структуру, что между тегами "body"

 

У меня так получается, по Вашему примеру

 

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#inir select').css('display','none');
$('.vibir').change(function(){
  var viborElement = $('.vibir :selected').attr('id');
  $('#inir select').css('display','none');
  $('.'+viborElement).css('display','block');
}); 
});
</script>
<style>

</style>
</head>
<body>

	<select class="vibir" name="sort"  id="vibor">
		<option value="">---Выберите сорт---</option>
		<option id="vibor1" value="Высокие бородатые">Высокие бородатые</option>
		<option id="vibor2" value="Бордюрные">Бордюрные</option>
		<option id="vibor3" value="Карлики">Карлики</option>
        <option value="Высокие миниатюрные">Высокие миниатюрные</option>
        <option value="Интермедия">Интермедия</option>
	</select>
	<div id="inir">
	<select class="vibor1" name="cvetibv">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Черный</option>
		<option value="2">Красный</option>
		<option value="3">Зеленый</option>
	</select>
	<select class="vibor1" name="cvetibv">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Серый</option>
		<option value="2">Желтый</option>
		<option value="3">Малиновый</option>
	</select>

</body>
</html>

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

@jakal, у тебя и у первого селектра и у второго один и тот же класс, нужно чтоб класс соответствовал айди пунктов выбора.

<body>
<div>
<select class="vibir" name="sort"  id="vibor">
  <option value="">---Выберите сорт---</option>
  <option id="vibor1" value="Высокие бородатые">1</option>
  <option id="vibor2" value="Бордюрные">2</option>
  <option id="vibor3" value="Карлики">3</option>
</select>
<div id="inir">
<select class="vibor1" name="cvetibv">
  <option value="">---1---</option>
  <option value="1">Черный</option>
  <option value="2">Красный</option>
  <option value="3">Зеленый</option>
</select>
<select class="vibor2" name="cvetibv">
  <option value="">---2---</option>
  <option value="1">Серый</option>
  <option value="2">Желтый</option>
  <option value="3">Малиновый</option>
</select>
</div>
</div>
</body>
Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Во так работает!) Благодарю, завтра во всей структуре "поюзаю" скриптик и потом отпишусь!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

 

var viborElement = $('.vibir :selected').attr('id');
У option'ов должны быть value.

Тогда можно будет получать значение правильным путём:

var viborElement = $('.vibir').val();

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

 

var viborElement = $('.vibir :selected').attr('id');
У option'ов должны быть value.

Тогда можно будет получать значение правильным путём:

var viborElement = $('.vibir').val();

 

Заменил предложенную Вами строку и списки вообще перестали появляться.

p.s. или в html структуре надо что то переделать?

@webil, изменил это  #inir select на это select#inir и удалил тот div-блок, который оборачивал эти списки.

Теперь надо еще как то, сделать так, что бы всегда до выбора был пустой список, что бы можно было эту структуру оформить.

А то получается на станичнику заходишь, а там только один "селект", а когда выбираешь "оптион", то появляется еще "селект", а надо что бы

сразу было все видно (все "селекты"), только они были пустые, а когда выбрал "оптион" в первом "селекте", то в другом "селекте", появились "оптион-ы"

Как то так!)

Все решил свой вопрос!)

добавив это

$('select#inir1').css('display','block');

и пустой блок

	<select id="inir1" class="vibor0" name="cvetibv">
		<option value="">---тест---</option>
	</select>

В итоге скрипт стал такого вида

$(document).ready(function() {
$('select#inir').css('display','none');
$('select#inir1').css('display','block');
$('.vibir').change(function(){
  var viborElement = $('.vibir :selected').attr('id');
  $('select#inir').css('display','none');
  $('select#inir1').css('display','none');
  $('.'+viborElement).css('display','block');
}); 
});

Всем Спасибо за помощь!) p.s. буду дальше разбираться.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Столкнулся с проблемкой, когда решил добавить слайдер для диапазона цен.

То есть до слайдера скрипт был дополнен так:

$(document).ready(function() {
$('select#inir,input#inir').css('display','none');
$('select#inir1,input#inir1').css('display','block');
$('.vibir').change(function(){
  var viborElement = $('.vibir :selected').attr('id');
  $('select#inir,input#inir').css('display','none');
  $('select#inir1,input#inir1').css('display','none');
  $('.'+viborElement).css('display','block');
});

});

то есть добавил, кроме "селектов" еще и "инпуты", что бы отображались, только те что нужно, но после установки слайдера, пришлось изменить структуру "инпута", так как там задействовался еще один ID, и структура html изменилась так

 

с такой

<input id="inir1" class="vibor0" type="text" placeholder="Цена от:" style="width:70px;" />
<input id="inir1" class="vibor0" type="text" placeholder="Цена до:" style="width:70px;"  />

<input id="inir" class="vibor1" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
<input id="inir" class="vibor1" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />

на такую

<span id="inir1">
    <input id="minCost" class="vibor0" type="text" placeholder="Цена от:" style="width:70px;" />
    <input id="maxCost" class="vibor0" type="text" placeholder="Цена до:" style="width:70px;"  />
</span>
<span id="inir">
   <input id="minCost" class="vibor1" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
<input id="maxCost" class="vibor1" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />			</span>

то есть id который должен скрывать или отображать объект я вынес в span, соответственно скрипт дополнил так

$(document).ready(function() {
$('select#inir,input#inir,span#inir').css('display','none');
$('select#inir1,input#inir1,span#inir1').css('display','block');
$('.vibir').change(function(){
  var viborElement = $('.vibir :selected').attr('id');
  $('select#inir,input#inir,span#inir').css('display','none');
  $('select#inir1,input#inir1,span#inir1').css('display','none');
  $('.'+viborElement).css('display','block');
});

});

но почему то, когда выбираю нужный мне "оптион", то эти поля что в span не отображаются.

Помогите пожалуйста заставить их работать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

всю структуру html пожалуйста.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Вот

 

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui-slider.js"></script>
<script type="text/javascript" src="censlider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select#inir,input#inir,span#inir').css('display','none');
$('select#inir1,input#inir1,span#inir1').css('display','block');
$('.vibir').change(function(){
  var viborElement = $('.vibir :selected').attr('id');
  $('select#inir,input#inir,span#inir').css('display','none');
  $('select#inir1,input#inir1,span#inir1').css('display','none');
  $('.'+viborElement).css('display','block');
});

});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<select class="vibir" name="sort"><!--  id="vibor" -->
		<option id="vibor0" value="" selected>---Выберите сорт---</option>
		<option id="vibor1" value="Высокие бородатые">Высокие бородатые</option>
		<option id="vibor2" value="Бордюрные">Бордюрные</option>
		<option id="vibor3" value="Карлики">Карлики</option>
        <option id="vibor4" value="Высокие миниатюрные">Высокие миниатюрные</option>
        <option id="vibor5" value="Интермедия">Интермедия</option>
	</select>
	
	<select id="inir1" class="vibor0">
		<option value="">---Выберите цвет(а)---</option>
	</select>
	<select id="inir" class="vibor1" name="cvetibv">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Черный</option><option value="2">Красный</option><option value="3">Зеленый</option><option value="3">Зеленый</option>
		<option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option>
		<option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option>
	</select>
	<select id="inir" class="vibor2" name="cvetib">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
	</select>
	<select id="inir" class="vibor3" name="cvetik">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
	</select>
	<select id="inir" class="vibor4" name="cvetivm">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
	</select>
	<select id="inir" class="vibor5" name="cvetii">
		<option value="">---Выберите цвет(а)---</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
	</select>

	
	<div style="width:250px;">
			<div class="formCost">
			<span id="inir1">
				<input id="minCost" class="vibor0" type="text" placeholder="Цена от:" style="width:70px;" />
				<input id="maxCost" class="vibor0" type="text" placeholder="Цена до:" style="width:70px;"  />
			</span>
			<span id="inir">
				<input id="minCost" class="vibor1" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
				<input id="maxCost" class="vibor1" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />

				<input id="minCost" class="vibor2" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
				<input id="maxCost" class="vibor2" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />

				<input id="minCost" class="vibor3" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
				<input id="maxCost" class="vibor3" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />

				<input id="minCost" class="vibor4" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
				<input id="maxCost" class="vibor4" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />

				<input id="minCost" class="vibor5" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
				<input id="maxCost" class="vibor5" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />				
			</span>
			</div>
			<div class="sliderCont">
					<div id="slider"></div>
			</div>
	</div>


	<select id="inir1" class="vibor0">
		<option value="">---Первая буква в названии---</option>
	</select>
	<select id="inir" class="vibor1" name="letter-namerusibv">
		<option value="">---Первая буква в названии---</option>
		<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
		<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
		<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
		<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
		<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
		<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
		<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
		<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
		<option value="Я">Я</option>
	</select>
	<select id="inir" class="vibor2" name="letter-namerusibv">
		<option value="">---Первая буква в названии---</option>
		<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
		<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
		<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
		<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
		<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
		<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
		<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
		<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
		<option value="Я">Я</option>
	</select>
	<select id="inir" class="vibor3" name="letter-namerusibv">
		<option value="">---Первая буква в названии---</option>
		<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
		<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
		<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
		<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
		<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
		<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
		<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
		<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
		<option value="Я">Я</option>
	</select>
	<select id="inir" class="vibor4" name="letter-namerusibv">
		<option value="">---Первая буква в названии---</option>
		<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
		<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
		<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
		<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
		<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
		<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
		<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
		<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
		<option value="Я">Я</option>
	</select>
	<select id="inir" class="vibor5" name="letter-namerusibv">
		<option value="">---Первая буква в названии---</option>
		<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
		<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
		<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
		<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
		<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
		<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
		<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
		<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
		<option value="Я">Я</option>
	</select>
	
</body>
</html>

 

 

Вот демо



Все "селекты" работают и думаю "инпуты" тоже, если их создать отдельно от слайдера цен (что бы был только id inir)

а вот когда в паре с слайдером, что то не хочет( может нельзя так делать span#inir (так же пробовал label место span, эффект тот же)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Тебе айдишники: inir и inir1 вообще зачем?

имя айди должено встречаться один раз на странице

 

кажется понял зачем, чтоб были пустые значения...

Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

они мне не зачем, но когда их сменить на class, то тогда не отображаются не "селекты" не "инпуты", потому их и не трогаю

p.s. я тоже за то что бы минимизировать количество id-ов

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

@jakal, если все правильно понял то вот такой вот код.

 

<script type="text/javascript">
$(document).ready(function() {
$('.selectplace select, .selectplace input').css('display','none');
$('.selectplace select.vibor0, .selectplace input.vibor0, .selectplace select.vibir').css('display','block');
$('select.vibor0, input.vibor0').prop('disabled', true);
$('.vibir').change(function(){
  var viborElement = $('.vibir :selected').attr('id');
  $('.selectplace select, .selectplace input').css('display','none');
  $('.'+viborElement+', .selectplace select.vibir').css('display','block');
});

});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="selectplace">

		<select class="vibir" name="sort"><!--  id="vibor" -->
			<option id="vibor0" value="" selected>---Выберите сорт---</option>
			<option id="vibor1" value="Высокие бородатые">Высокие бородатые</option>
			<option id="vibor2" value="Бордюрные">Бордюрные</option>
			<option id="vibor3" value="Карлики">Карлики</option>
			<option id="vibor4" value="Высокие миниатюрные">Высокие миниатюрные</option>
			<option id="vibor5" value="Интермедия">Интермедия</option>
		</select>
		
		<select class="vibor0" name="cvetibv">
			<option value="">---Выберите цвет(а)---</option>
		</select>
		<select class="vibor1" name="cvetibv">
			<option value="">---Выберите цвет(а)---</option>
			<option value="1">Черный</option><option value="2">Красный</option><option value="3">Зеленый</option><option value="3">Зеленый</option>
			<option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option>
			<option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option><option value="3">Зеленый</option>
		</select>
		<select class="vibor2" name="cvetib">
			<option value="">---Выберите цвет(а)---</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		</select>
		<select class="vibor3" name="cvetik">
			<option value="">---Выберите цвет(а)---</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		</select>
		<select class="vibor4" name="cvetivm">
			<option value="">---Выберите цвет(а)---</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		</select>
		<select class="vibor5" name="cvetii">
			<option value="">---Выберите цвет(а)---</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
			<option value="1">Серый</option><option value="2">Желтый</option><option value="3">Малиновый</option><option value="3">Малиновый</option>
		</select>

		
		<div style="width:250px;">
				<div class="formCost">
				<span>
					<input id="minCost" class="vibor0" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
					<input id="maxCost" class="vibor0" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />
				</span>
				<span>
					<input id="minCost" class="vibor1" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
					<input id="maxCost" class="vibor1" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />
	
					<input id="minCost" class="vibor2" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
					<input id="maxCost" class="vibor2" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />
	
					<input id="minCost" class="vibor3" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
					<input id="maxCost" class="vibor3" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />
	
					<input id="minCost" class="vibor4" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
					<input id="maxCost" class="vibor4" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />
	
					<input id="minCost" class="vibor5" type="text" name="from-cenaibv" placeholder="Цена от:" style="width:70px;" />
					<input id="maxCost" class="vibor5" type="text" name="to-cenaibv" placeholder="Цена до:" style="width:70px;"  />				
				</span>
			</div>
			<div class="sliderCont">
				<div id="slider"></div>
			</div>
		</div>
	
		<select class="vibor0" name="letter-namerusibv">
			<option value="">---Первая буква в названии---</option>
		</select>
		<select class="vibor1" name="letter-namerusibv">
			<option value="">---Первая буква в названии---</option>
			<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
			<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
			<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
			<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
			<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
			<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
			<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
			<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
			<option value="Я">Я</option>
		</select>
		<select class="vibor2" name="letter-namerusibv">
			<option value="">---Первая буква в названии---</option>
			<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
			<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
			<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
			<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
			<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
			<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
			<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
			<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
			<option value="Я">Я</option>
		</select>
		<select class="vibor3" name="letter-namerusibv">
			<option value="">---Первая буква в названии---</option>
			<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
			<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
			<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
			<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
			<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
			<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
			<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
			<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
			<option value="Я">Я</option>
		</select>
		<select class="vibor4" name="letter-namerusibv">
			<option value="">---Первая буква в названии---</option>
			<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
			<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
			<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
			<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
			<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
			<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
			<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
			<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
			<option value="Я">Я</option>
		</select>
		<select class="vibor5" name="letter-namerusibv">
			<option value="">---Первая буква в названии---</option>
			<option value="А">А</option><option value="Б">Б</option><option value="В">В</option><option value="Г">Г</option>
			<option value="Д">Д</option><option value="Е">Е</option><option value="Ё">Ё</option><option value="Ж">Ж</option>
			<option value="З">З</option><option value="И">И</option><option value="Й">Й</option><option value="К">К</option>
			<option value="Л">Л</option><option value="М">М</option><option value="Н">Н</option><option value="О">О</option>
			<option value="П">П</option><option value="Р">Р</option><option value="С">С</option><option value="Т">Т</option>
			<option value="У">У</option><option value="Ф">Ф</option><option value="Х">Х</option><option value="Ц">Ц</option>
			<option value="Ч">Ч</option><option value="Ш">Ш</option><option value="Щ">Щ</option><option value="Ъ">Ъ</option>
			<option value="Ы">Ы</option><option value="Ь">Ь</option><option value="Э">Э</option><option value="Ю">Ю</option>
			<option value="Я">Я</option>
		</select>
	</div>
</body> 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

вставил Ваш код, и все поля ("селекты" и "инпуты") сразу отображаются (в общем, не работает)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

вы точно все вставили и даже новый добавленный див?

 

В демо все работает.

new 3.html

Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Странно все вроде скопировал, но не работало, но Ваше демо работает)

Спасибо!)

Еще вопросик, что нужно дописать в код, что бы и это работало

<div id="slider"></div> (это как бы слайдер) и он сейчас вообще не отображается (пусть даже и не прячется, а отображается всегда)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Странно все вроде скопировал, но не работало, но Ваше демо работает)

Спасибо!)

Еще вопросик, что нужно дописать в код, что бы и это работало

<div id="slider"></div> (это как бы слайдер) и он сейчас вообще не отображается (пусть даже и не прячется, а отображается всегда)

Оу а его то я и не тестил, чуть погодя попробую разобраться.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...