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

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>


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