Javascript-форум - JQuery и Select

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - JQuery и Select (https://javascript.ru/forum/jquery/22850-jquery-i-select.html)

iskiz

03.11.2011 03:55

JQuery и Select

Здравствуйте. Хочу сделать вывод определенного блока при выборе нужной строки в "select"

Есть такой скрипт:

$(document).ready(function(){
  $("select#category").change(function (){
     if ($("#category option:selected").val() == "мой value"){
         $("#trackershow").show();
     }
     else
     {
         $("#trackershow").hide();
     }
  });
});

Не могу сделать так, чтобы можно было вбить к примеру 5 моих "value". Я так понимаю, что нужно в "array" вбить через запятую и сделать поиск по массиву. Но к сожалению я пока новичок в этих вопросах. Могли бы Вы подсказать как реализовать данный скрипт.

ksa	03.11.2011 08:45

Цитата:

Сообщение от iskiz

Хочу сделать вывод определенного блока при выборе нужной строки в "select"
Есть такой скрипт:

А зачем нам не работоспособный скрипт? :) Ты лучше хтмл свой покажи... С селектом и дивами...

iskiz

03.11.2011 13:54

Цитата:

Сообщение от ksa (Сообщение 134199)

А зачем нам не работоспособный скрипт? :) Ты лучше хтмл свой покажи... С селектом и дивами...

Скрипт, который выше, работает. С дивами выглядит так:

<script>
$(document).ready(function(){
  $("select#category").change(function (){
     if ($("#category option:selected").val() == "99"){
         $("#trackershow").show();
     }
     else
     {
         $("#trackershow").hide();
     }
  });
});
</script>

<select name="catlist[]" id="category" onchange="onCategoryChange(this.value)" style="width:302px;height:22px">
<option style="color: black" value="11">Текст1</option>
<option style="color: black" value="22">Текст2</option>
<option style="color: black" value="33">Текст3</option>
<option style="color: black" value="44">Текст4</option>
<option style="color: black" value="55">Текст4</option>
<option style="color: black" value="66">Текст6</option>
<option style="color: black" value="77">Текст7</option>
<option style="color: black" value="88">Текст8</option>
<option style="color: black" value="99">Текст9</option>
</select>

<div id="trackershow" style="display:none">Любой контент</div>

При выборе последней строки в "Select" ("Текст 9" которая), див отображается, при других вариантах див скрыт.

Мне нужно в скрипт добавить несколько значений "value". Подскажите как это сделать?

iskiz

03.11.2011 14:05

Пока что сделал через "else if", но в таком случае скрипт сильно длинный получается. Может возможно в "var" сбить все значения "value"? Незнаю только как написать это, чтобы работало :)

ksa	03.11.2011 14:25

Цитата:

Сообщение от iskiz

Незнаю только как написать это, чтобы работало

Например вот так...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.container {
	display: none;
}
#category {
	width: 302px;
	height: 22px;
}
#category option {
	color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#category").click(function (){
		var id=this.value;
		$("#container > div").hide();
		$("#cn"+id).show();
	});
});
</script>
</head>
<body>
<select name="catlist[]" id="category">
	<option></option>
	<option value="11">Текст1</option>
	<option value="22">Текст2</option>
	<option value="33">Текст3</option>
	<option value="44">Текст4</option>
	<option value="55">Текст5</option>
	<option value="66">Текст6</option>
	<option value="77">Текст7</option>
	<option value="88">Текст8</option>
	<option value="99">Текст9</option>
</select>
<div id="container">
	<div id="cn11" class="container">Контент 11</div>
	<div id="cn22" class="container">Контент 22</div>
	<div id="cn33" class="container">Контент 33</div>
	<div id="cn44" class="container">Контент 44</div>
	<div id="cn55" class="container">Контент 55</div>
	<div id="cn66" class="container">Контент 66</div>
	<div id="cn77" class="container">Контент 77</div>
	<div id="cn88" class="container">Контент 88</div>
	<div id="cn99" class="container">Контент 99</div>
</div>
</body>
</html>

iskiz

03.11.2011 14:57

Немного меня не поняли. А вообще круто - для каждого "value" свой вывод. :) Но тут задача в чем? У меня есть кнопка "Добавить файл" и нужно, чтобы эта кнопка отображалась только при выборе категорий "Файлы, Видео, Музыка"

Так получится?

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.container {
	display: none;
}
#category {
	width: 302px;
	height: 22px;
}
#category option {
	color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#category").click(function (){
		var id=new Array("77, 88, 99");
		$("#container > div").hide();
		$("#cn"+id).show();
	});
});
</script>
<select name="catlist[]" id="category">
	<option></option>
	<option value="11">Текст1</option>
	<option value="22">Текст2</option>
	<option value="33">Текст3</option>
	<option value="44">Текст4</option>
	<option value="55">Текст5</option>
	<option value="66">Текст6</option>
	<option value="77">Музыка</option>
	<option value="88">Видео</option>
	<option value="99">Файлы</option>
</select>
<div id="container">
	<div id="cn11" class="container">Контент 11</div>
</div>

Такое чувство, что что-то тут неправильно ;)

ksa	03.11.2011 15:07

Цитата:

Сообщение от iskiz

Немного меня не поняли.

ну конечно! :lol:

Цитата:

Сообщение от iskiz

У меня есть кнопка "Добавить файл" и нужно, чтобы эта кнопка отображалась только при выборе категорий "Файлы, Видео, Музыка"

Как же я сразу-то не догадался! :lol:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#container {
	display: none;
}
#category {
	width: 302px;
	height: 22px;
}
#category option {
	color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#category").click(function (){
		var typ=this.options[this.selectedIndex].className;
		if (typ=='file') {
			$("#container").show();
		} else {
			$("#container").hide();
		};
	});
});
</script>
</head>
<body>
<select name="catlist[]" id="category">
	<option></option>
	<option value="11">Текст1</option>
	<option value="22">Текст2</option>
	<option value="33">Текст3</option>
	<option value="44">Текст4</option>
	<option value="55">Текст5</option>
	<option value="66">Текст6</option>
	<option class='file' value="77">Музыка</option>
	<option class='file' value="88">Видео</option>
	<option class='file' value="99">Файлы</option>
</select>
<div id="container">
	<button>Добавить файл</button>
</div>
</body>
</html>

iskiz

03.11.2011 15:13

Цитата:

Сообщение от ksa (Сообщение 134248)

Как же я сразу-то не догадался!

Блин :) Ну будем наедятся, что это я пишу последний раз :) А то скоро надоем...

Видимо я плохо расписал ситуацию - "намотаю на ус" на будущее :)

К сожалению я немогу в "select" дописать классы только для нужных "option", так как этот селект ПХП скриптом генерируется. Могу отталкиваться только от значений "value" либо непосредственно от самого текста(например: "Музыка").

Есть идеи? Кстати спасибки за помощь :)

ksa	03.11.2011 15:15

Цитата:

Сообщение от iskiz

этот селект ПХП скриптом генерируется

Ну так сгенери его как нужно. :) Зачем себе проблемы лишние создавать...

ksa	03.11.2011 15:20

Цитата:

Сообщение от iskiz

Могу отталкиваться только от значений "value" либо непосредственно от самого текста(например: "Музыка")

Это ущербный подход... :(

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#container {
	display: none;
}
#category {
	width: 302px;
	height: 22px;
}
#category option {
	color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#category").click(function (){
		var typ={
			77: true,
			88: true,
			99: true
		}
		var val=this.value;
		if (typ[val]) {
			$("#container").show();
		} else {
			$("#container").hide();
		};
	});
});
</script>
</head>
<body>
<select name="catlist[]" id="category">
	<option></option>
	<option value="11">Текст1</option>
	<option value="22">Текст2</option>
	<option value="33">Текст3</option>
	<option value="44">Текст4</option>
	<option value="55">Текст5</option>
	<option value="66">Текст6</option>
	<option class='file' value="77">Музыка</option>
	<option class='file' value="88">Видео</option>
	<option class='file' value="99">Файлы</option>
</select>
<div id="container">
	<button>Добавить файл</button>
</div>
</body>
</html>

iskiz

03.11.2011 15:36

Спасибо за помощь. Возможно и ущербный, но и у меня категорий не 100500 :)

otmoroz095

30.12.2011 13:43

Спасибо за скрипт!

otmoroz095

30.12.2011 13:52

когда в голову лезут много elseif, нужно использовать switch/case.
народная примета :)

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