Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2017, 16:55
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

Вывод значения selecta в div
Здравствуйте. Есть код, все работает, но хочется сделать, чтобы к примеру при выборе значений в селектах, данные выводились в div`е. К примеру, рядом с словом "Пробег", котоырй расположен в <div class="dvn" onClick="opendv('173')">Пробег</div>, при выборе значения в первом или втором селекте добавлялось значения. Вот так бы хотелось, <div class="dvn" onClick="opendv('173')">Пробег от 90000 до 150 000</div>. Помогите пожалуйста, уж очень хочется такое сделать. Хотелось бы, что не было перезагрузке страницы, однако, чтобы после перезагрузке сохранялись эти данные, надо как-то привязать к "selected" <option value="15000" selected >от 15 000 </option>...
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.dvv {
position: absolute;
left:0px;
top:31px;
padding:5px;
border: 1px solid #B5B8C8;
z-index:10;
background-color: #ffffff;
width:225px;
max-height:200px;
min-height:30px;
overflow-x:hidden;
overflow-y:auto ;
FONT: 12px  'Arial';

}
.dvn {
padding-left:5px; 
padding-top:7px; 
height:28px; 
width:180px;
cursor:default;
FONT: 12px  'Arial';
}
.dvn {
border: 1px solid #B5B8C8;
	margin-right:2px;
	margin-bottom:2px;
   	width: 158px;
   	height: 28px;
   	overflow: hidden;
   	background: #ffffff url(select_arrow.png) 98% 6px no-repeat;
}

</style>
</head>
<body>
<div class="wrap">

<div class="blockselect" id="dvs173">
<div class="dvn" onClick="opendv('173')">Пробег</div>
<div class="dvv" id="dvv173" style="display:none;">
				<select name="f_chis_2[1]">
				<option value="0" >Пробег от</option>
									<option value="1000"  >от 1 000  </option>
										<option value="5000"  >от 5 000  </option>
										<option value="10000"  >от 10 000  </option>
										<option value="15000" selected >от 15 000  </option>
										<option value="20000"  >от 20 000  </option>
										<option value="25000"  >от 25 000  </option>
										<option value="30000"  >от 30 000  </option>
										<option value="35000"  >от 35 000  </option>
										<option value="40000"  >от 40 000  </option>
										<option value="45000"  >от 45 000  </option>
										<option value="50000"  >от 50 000  </option>
										<option value="55000"  >от 55 000  </option>
										<option value="60000"  >от 60 000  </option>
										<option value="65000"  >от 65 000  </option>
										<option value="70000"  >от 70 000  </option>
										<option value="75000"  >от 75 000  </option>
										<option value="80000"  >от 80 000  </option>
										<option value="85000"  >от 85 000  </option>
										<option value="90000"  >от 90 000  </option>
										<option value="95000"  >от 95 000  </option>
										<option value="100000"  >от 100 000  </option>
										<option value="110000"  >от 110 000  </option>
										<option value="120000"  >от 120 000  </option>
										<option value="130000"  >от 130 000  </option>
										<option value="140000"  >от 140 000  </option>
										<option value="150000"  >от 150 000  </option>
										<option value="160000"  >от 160 000  </option>
										<option value="170000"  >от 170 000  </option>
										<option value="180000"  >от 180 000  </option>
										<option value="190000"  >от 190 000  </option>
										<option value="200000"  >от 200 000  </option>
										<option value="250000"  >от 250 000  </option>
										<option value="300000"  >от 300 000  </option>
										<option value="350000"  >от 350 000  </option>
										<option value="400000"  >от 400 000  </option>
										<option value="450000"  >от 450 000  </option>
										<option value="500000"  >от 500 000  </option>
										<option value="600000"  >от 600 000  </option>
									</select>

				<select name="f_chis_2[2]">
				<option value="0" >Пробег до</option>
									<option value="1000"  >до 1 000  </option>
										<option value="5000"  >до 5 000  </option>
										<option value="10000"  >до 10 000  </option>
										<option value="15000"  >до 15 000  </option>
										<option value="20000"  >до 20 000  </option>
										<option value="25000"  >до 25 000  </option>
										<option value="30000" selected >до 30 000  </option>
										<option value="35000"  >до 35 000  </option>
										<option value="40000"  >до 40 000  </option>
										<option value="45000"  >до 45 000  </option>
										<option value="50000"  >до 50 000  </option>
										<option value="55000"  >до 55 000  </option>
										<option value="60000"  >до 60 000  </option>
										<option value="65000"  >до 65 000  </option>
										<option value="70000"  >до 70 000  </option>
										<option value="75000"  >до 75 000  </option>
										<option value="80000"  >до 80 000  </option>
										<option value="85000"  >до 85 000  </option>
										<option value="90000"  >до 90 000  </option>
										<option value="95000"  >до 95 000  </option>
										<option value="100000"  >до 100 000  </option>
										<option value="110000"  >до 110 000  </option>
										<option value="120000"  >до 120 000  </option>
										<option value="130000"  >до 130 000  </option>
										<option value="140000"  >до 140 000  </option>
										<option value="150000"  >до 150 000  </option>
										<option value="160000"  >до 160 000  </option>
										<option value="170000"  >до 170 000  </option>
										<option value="180000"  >до 180 000  </option>
										<option value="190000"  >до 190 000  </option>
										<option value="200000"  >до 200 000  </option>
										<option value="250000"  >до 250 000  </option>
										<option value="300000"  >до 300 000  </option>
										<option value="350000"  >до 350 000  </option>
										<option value="400000"  >до 400 000  </option>
										<option value="450000"  >до 450 000  </option>
										<option value="500000"  >до 500 000  </option>
										<option value="600000"  >до 600 000  </option>
									</select>
</div>
</div>
  
</div>
<script>
jQuery(function($){
		$(document).mouseup(function (e){ // событие клика по веб-документу
			var div = $(".dvv"); // тут указываем ID или класс элемента
			if (!div.is(e.target) // если клик был не по нашему блоку
				&& div.has(e.target).length === 0) { // и не по его дочерним элементам
				div.hide(); // скрываем его
				actid = actid*(-1);
				if(actid>0) actid=0;
			}
		});
	});
	
var actid = 0;


function opendv(a) 
	{
	if(document.getElementById('dvv'+a))
		{
		actid = actid*(-1);
		if(actid == a)
			{
			document.getElementById('dvv'+a).style.display = 'none';
			actid = 0;
			}
		else
			{
			document.getElementById('dvv'+a).style.display = '';
			$('#dvv'+a).scrollTop(0);
			actid = a;
			}
		}
	}

	</script>
</body>
</html>

Последний раз редактировалось ksa, 27.10.2017 в 09:15.
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2017, 21:02
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

Извините, поможет мне кто-нибудь? Товарищи, очень нуждаюсь в вашей помощи...
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2017, 02:46
Аватар для tuchkovo-auto
Интересующийся
Отправить личное сообщение для tuchkovo-auto Посмотреть профиль Найти все сообщения от tuchkovo-auto
 
Регистрация: 11.02.2014
Сообщений: 14

Для select используйте атрибут или функцию onchange. Для вставки в div используйте div_id.innerHTML="".
Ответить с цитированием
  #4 (permalink)  
Старый 27.10.2017, 08:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Сообщение от aarka
чтобы после перезагрузке сохранялись эти данные, надо как-то привязать к "selected" <option value="15000" selected >от 15 000 </option>...
Для сохранения данных лучше использовать серверные возможности. А то такие вот сайтоделатели засирают клиентские компы своими "данными".
Ответить с цитированием
  #5 (permalink)  
Старый 27.10.2017, 09:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Сообщение от aarka
Вот так бы хотелось, <div class="dvn" onClick="opendv('173')">Пробег от 90000 до 150 000</div>.
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.dvv {
	position: absolute;
	left:0px;
	top:31px;
	padding:5px;
	border: 1px solid #B5B8C8;
	z-index:10;
	background-color: #ffffff;
	width:225px;
	max-height:200px;
	min-height:30px;
	overflow-x:hidden;
	overflow-y:auto ;
	FONT: 12px  'Arial';
}
.dvn {
	padding-left:5px; 
	padding-top:7px; 
	height:28px; 
	width:180px;
	cursor:default;
	FONT: 12px  'Arial';
}
.dvn {
	border: 1px solid #B5B8C8;
	margin-right:2px;
	margin-bottom:2px;
   	width: 158px;
   	height: 28px;
   	overflow: hidden;
   	background: #ffffff url(select_arrow.png) 98% 6px no-repeat;
}
</style>
<script type='text/javascript'>
$(function() {
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $(".dvv"); // тут указываем ID или класс элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
			&& div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
			actid = actid*(-1);
			if(actid>0) actid=0;
		};
	});
	$('.dvv > select').change(function(){
		var id=$(this).data('target');
		if (this.value=='0') {
				var str='';
		} else {
			str=this.options[this.selectedIndex].innerHTML;
		};
		$('#'+id).text(str);
	});
});
var actid = 0;
function opendv(a) {
	if(document.getElementById('dvv'+a)){
		actid = actid*(-1);
		if(actid == a){
			document.getElementById('dvv'+a).style.display = 'none';
			actid = 0;
		} else {
			document.getElementById('dvv'+a).style.display = '';
			$('#dvv'+a).scrollTop(0);
			actid = a;
		};
	};
};
</script>
</head>
<body>
<div class="wrap">
	<div class="blockselect" id="dvs173">
		<div class="dvn" onClick="opendv('173')">Пробег <span id='beg'></span><span id='end'></span></div>
		<div class="dvv" id="dvv173" style="display:none;">
			<select name="f_chis_2[1]" data-target='beg'>
				<option value="0" >Пробег от</option>
				<option value="1000">от 1 000  </option>
				<option value="5000">от 5 000  </option>
				<option value="10000">от 10 000  </option>
				<option value="15000">от 15 000  </option>
				<option value="20000">от 20 000  </option>
				<option value="25000">от 25 000  </option>
				<option value="30000">от 30 000  </option>
				<option value="35000">от 35 000  </option>
				<option value="40000">от 40 000  </option>
			</select>
			<select name="f_chis_2[2]" data-target='end'>
				<option value="0" >Пробег до</option>
				<option value="1000">до 1 000  </option>
				<option value="5000">до 5 000  </option>
				<option value="10000">до 10 000  </option>
				<option value="15000">до 15 000  </option>
				<option value="20000">до 20 000  </option>
				<option value="25000">до 25 000  </option>
				<option value="30000">до 30 000  </option>
				<option value="35000">до 35 000  </option>
				<option value="40000">до 40 000  </option>
			</select>
		</div>
	</div>
</div>
</body>
</html>

Последний раз редактировалось ksa, 27.10.2017 в 09:15.
Ответить с цитированием
  #6 (permalink)  
Старый 27.10.2017, 16:02
Аватар для tuchkovo-auto
Интересующийся
Отправить личное сообщение для tuchkovo-auto Посмотреть профиль Найти все сообщения от tuchkovo-auto
 
Регистрация: 11.02.2014
Сообщений: 14

Сообщение от ksa Посмотреть сообщение
Для сохранения данных лучше использовать серверные возможности.
Привет. А как лучше, использовать серверные возможности или cookie?
Ответить с цитированием
  #7 (permalink)  
Старый 30.10.2017, 09:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Сообщение от tuchkovo-auto
А как лучше, использовать серверные возможности
Передавать серверу ключевую информацию. Это потом можно использовать при формировании страницы.

Последний раз редактировалось ksa, 21.12.2017 в 09:52.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS вывод в div строку с пробелами Gretta Элементы интерфейса 2 15.05.2017 09:54
получение некого value и вывод его в определенный блок div Sprutenok000 Элементы интерфейса 28 24.03.2017 20:00
Записать значения DIV в массив allonemoon Events/DOM/Window 3 06.08.2016 05:18
Записать значения DIV в массив allonemoon Events/DOM/Window 0 06.08.2016 01:23
Вывод значений таймера в div Tylmaril (X)HTML/CSS 7 21.07.2013 16:47