Javascript.RU

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

Подскажите скрипт отбора по параметрам
Подскажите пожалуйста начинающему, на какой скрипте можно реализовать следующее:
Выбираем из списка наименование, открывается другой и по выбору из второго списка открывается ниже поле с описанием. Что то вроде скрипта выбора города, где выбирается страна потом город и открывается поле с описанием города.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2012, 20:19
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

это делается с помощью ajax'a.

Сначала выводишь основной список.
Потом по "change" обращаешься к обработчику и передаешь ему выбранное значение. В зависимости от этого значения, обработчик отдаёт новый второй список. И по "change" по второму списку — добавляешь поле

в принципе, селекты и прочее я б не советовал тут использовать. В таких делах обычно требуется хорошая стилизация. Лучше просто html списки (ul>li).
__________________
С моих слов записано верно.
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2012, 20:57
Интересующийся
Отправить личное сообщение для Петрович Посмотреть профиль Найти все сообщения от Петрович
 
Регистрация: 09.03.2012
Сообщений: 23

Сообщение от T-sh Посмотреть сообщение
это делается с помощью ajax'a.


в принципе, селекты и прочее я б не советовал тут использовать. В таких делах обычно требуется хорошая стилизация. Лучше просто html списки (ul>li).
Спасибо за ответ. А где можно посмотреть грамотный пример html-списка либо уже готовый шаблон.
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2012, 21:06
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

ну вот пример с обычными списками:
http://htmlweb.ru/ajax/example/region.php

там очень хорошо расписано всё..

с html списками я погорячился, начинающему трудновато будет реализовать. попробуйте для начала этот вариант, он проще для понимания. а потом уже по этому же принципу заменяйте <select><option>Пункт списка</option></select> на <ul><li>Пункт списка</li></ul>
__________________
С моих слов записано верно.
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2012, 21:19
Интересующийся
Отправить личное сообщение для Петрович Посмотреть профиль Найти все сообщения от Петрович
 
Регистрация: 09.03.2012
Сообщений: 23

Сообщение от T-sh Посмотреть сообщение
ну вот пример с обычными списками:
http://htmlweb.ru/ajax/example/region.php

там очень хорошо расписано всё..

с html списками я погорячился, начинающему трудновато будет реализовать. попробуйте для начала этот вариант, он проще для понимания. а потом уже по этому же принципу заменяйте <select><option>Пункт списка</option></select> на <ul><li>Пункт списка</li></ul>
Спасибо. Попробую вариант с ajax с последующей заменой. Я в принципе ajax уже просматоивал, но что то мне показалось накрученным все. Просто смотрю на скрипт меню с подгруппами вот к примеру этот что ниже, ну вот фактически готовое решение, не хватает только вместо перехода на другой урл прикрепить переход на раскрывающее поле....а как грамотно сделать пока не соображу. Можно из данного скрипта вместо переходов на урл сделать открывающее поле с информацией на этой же странице?
<Script Language="JavaScript">
 var maxLength = 20;
 website = new Array;
 website[0] = "Категория - 1";
 website[1] = "Категория - 2";
 website[2] = "Категория - 3";
 website[3] = "Категория - 4";

 var trueLength = website.length;
 var lst = website.length;

 url = new Array;
 url[0] = "#";
 url[1] = "#";
 url[2] = "#";
 url[3] = "#";
 url[4] = "#";

 ccselect = new Array;
 ccselect[0] = "Категория - 1";
 ccselect[1] = "Категория - 2";
 ccselect[2] = "Категория - 3";
 ccselect[3] = "Категория - 4";

 function changePage()
 {menuNum = document.ccDoubleList.ccBitsyG.selectedIndex;
 if (menuNum == null)
 {alert("Please select a category from the menu.");
 return;}
 else
 {i = document.ccDoubleList.ccDoubleZ.selectedIndex;
 window.location.href = url[i];}}

 function changeMenu()
 {website.length = 0;
 menuNum = document.ccDoubleList.ccBitsyG.selectedIndex;
 if (menuNum == null) return;
 if (menuNum == 0)
 {website = new Array;
 website[0] = new Option("Пункт 1.1");
 website[1] = new Option("Пункт 1.2");
 website[2] = new Option("Пункт 1.3");
 website[3] = new Option("Пункт 1.4");
 website[4] = new Option("Пункт 1.5");
 url = new Array;
 url[0] = "#";
 url[1] = "#";
 url[2] = "#";
 url[3] = "#";
 url[4] = "#";
 }
 if (menuNum == 1)
 {website = new Array;
 website[0] = new Option("Пункт 2.1");
 website[1] = new Option("Пункт 2.2");
 website[2] = new Option("Пункт 2.3");
 website[3] = new Option("Пункт 2.4");
 website[4] = new Option("Пункт 2.5");
 url = new Array;
 url[0] = "#";
 url[1] = "#";
 url[2] = "#";
 url[3] = "#";
 url[4] = "#";
 }

 if (menuNum == 2)
 {website = new Array;
 website[0] = new Option("Пункт 3.1");
 website[1] = new Option("Пункт 3.2");
 website[2] = new Option("Пункт 3.3");
 website[3] = new Option("Пункт 3.4");
 website[4] = new Option("Пункт 3.5");
 url = new Array;
 url[0] = "#";
 url[1] = "#";
 url[2] = "#";
 url[3] = "#";
 url[4] = "#";
 }

 if (menuNum == 3)
 {website = new Array;
 website[0] = new Option("Пункт 4.1");
 website[1] = new Option("Пункт 4.2");
 website[2] = new Option("Пункт 4.3");
 website[3] = new Option("Пункт 4.4");
 website[4] = new Option("Пункт 4.5");
 url = new Array;
 url[0] = "#";
 url[1] = "#";
 url[2] = "#";
 url[3] = "#";
 url[4] = "#";
 }

 tot = website.length;
 for (i = lst; i > 0; i--)
 {document.ccDoubleList.ccDoubleZ.options[i] = null;}
 for (i = 0; i < tot; i++)
 {document.ccDoubleList.ccDoubleZ.options[i] = website[i];}
 document.ccDoubleList.ccDoubleZ.options[0].selected = true;
 lst = website.length;}
 </Script>
</Head>
<Body BgColor="#ffffff">
 <Script Language="JavaScript">
 with (document)
 {writeln('<Center>');
 writeln('<Table Border=0 CellSpacing=0 CellPadding=3>');
 writeln('<Tr><Form Name="ccDoubleList"><Td Align=Left>');
 writeln('<Font Face=Verdana,Tahoma,Arial Size=2 Color=#000000><B>Категория</B></Font><Br>');
 writeln('<Select Name="ccBitsyG" onChange="changeMenu(this.form)">');
 tot = ccselect.length;
 for (i = 0; i < tot; i++)
 writeln("<Option>" +ccselect[i]);
 writeln("</Select>");
 writeln('</Td><Td>');
 writeln('<Font Face=Verdana,Tahoma,Arial Size=2 Color=#000000><B>Меню</B></Font><Br>');
 writeln('<Select Name="ccDoubleZ">');
 for (i = 0; i < maxLength; i++)
 writeln("<OPTION>" +website[i]);
 writeln("</Select>");
 for (i = maxLength; i > trueLength; i--)
 {ccDoubleList.ccDoubleZ.options[i] = null;}
 writeln('</Td><Td Valign=bottom><A Href="javascript:changePage();">');
 writeln('<Img src="picture.gif" Width=19 Height=14 Border=0></A>');
 writeln('</Td></Tr>');
 changeMenu();
 writeln('</Form>');
 writeln('</Table>');
 writeln('</Center>');
 }
 </Script>
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2012, 21:22
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

нее, это у вас совсем другое...

сейчас гостей выпровожу и набросаю вам скрипт)
__________________
С моих слов записано верно.
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2012, 21:32
Интересующийся
Отправить личное сообщение для Петрович Посмотреть профиль Найти все сообщения от Петрович
 
Регистрация: 09.03.2012
Сообщений: 23

Ок...я понимаю что другое))): но как начинающему для реализации задуманного))):
Мне вот такая форма как здесь http://www.hotstart.com/home/products/in-block-heaters/ вообще то нужна, но там я как понимаю на jQuery реализовано, а хотелось бы попроще без подвязывания к библиотекам и прочему.

Последний раз редактировалось Петрович, 09.03.2012 в 21:38.
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2012, 21:52
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

jQuery обычно в таких делах используется только для удобства работы с ajax запросами..
вот. набросал, тоже с jQuery, но его можно и заменить на чистый js, только смысла в этом не вижу. проще подключать библиотеку только на ту страницу, в которой он нужен.

стилизуй с помощью css под нужный тебе вид:

html файл
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<meta name="description" content="" />
	<script src="jquery.js"></script>
	<script>
	$(document).ready(function(){
		$("#list1 li").live("click",function(){
			var itemId = $(this).attr("id"); // id выбранного пункта для передачи в обработчик
			var itemTitle = $(this).html(); // заголовок выбранного пункта
			$("#list1 span").html(itemTitle);
			
			$.post("ajax.php",{data:"list1", id:itemId },function(data){
				$("#list2").html(data);  // подгружаем второй список
				} 
			);
		});
	
	
		$("#list2 li").live("click",function(){
			var itemTitle = $(this).html(); // заголовок выбранного пункта
			$("#list2 span").html(itemTitle);
			
			$.post("ajax.php",{data:"list2"},function(data){
				$("#list3").html(data);  // подгружаем поле
				} 
			);
		});
	
	});
	
	</script>
	
	<style>
	.lists ul>div{
	display: none;
	}
	.lists :hover div{
	display: block;
	}
	</style>
</head>

<body>
	<div id="list1" class="lists">
		<ul><span>Выберите страну:</span>
			<div>
				<li id="Russia">Россия</li>
				<li id="Kazakhstan">Казахстан</li>
				<li id="Ukraina">Украина</li>
			</div>
		</ul>
	</div>
	<div id="list2" class="lists">
	</div>
	<div id="list3" class="lists">
	</div>
</body>
</html>


ajax.php
<?php
$listNumber = $_POST[data];
$itemId = $_POST[id];

if($listNumber == "list1"){
	switch ($itemId){
		case "Russia": echo("
			<ul><span>Выберите город</span>
			<li id='Moscow'>Москва</li> 
			<li id='Piter'>Питер</li>
			<li id='Novosib'>Новосибирск</li>
			</ul>
		"); break;
		
		case "Kazakhstan": echo("
			<ul><span>Выберите город</span>
			<li id='Almaty'>Алмата</li> 
			<li id='Pavlodar'>Павлодар</li>
			<li id='Astana'>Астана</li>
			</ul>
		"); break;
		
		case "Ukraina": echo("
			<ul><span>Выберите город</span>
			<li id='gorod1'>Город 1</li> 
			<li id='gorod2'>Город 2</li>
			</ul>
		"); break;
		
	}
}

if($listNumber == "list2"){
	echo("<input type='text'>");
	}
?>
__________________
С моих слов записано верно.
Ответить с цитированием
  #9 (permalink)  
Старый 09.03.2012, 22:13
Интересующийся
Отправить личное сообщение для Петрович Посмотреть профиль Найти все сообщения от Петрович
 
Регистрация: 09.03.2012
Сообщений: 23

Супер! спасибо огромное. Попробую теперь реализовать написанное
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Небольшой скрипт - подскажите как поправить Volonter Events/DOM/Window 6 03.02.2012 12:24
Подскажите скрипт для загрузки фото на сервер Mapshal Общие вопросы Javascript 0 13.08.2011 17:49
Подскажите, что за скрипт? Владимир Новицкий Элементы интерфейса 5 01.03.2011 20:44
подскажите скрипт sc2r2bey Общие вопросы Javascript 2 10.02.2011 11:38
Почему не работает скрипт, подскажите aviaks Ваши сайты и скрипты 2 05.05.2009 14:38