Подскажите скрипт отбора по параметрам
Подскажите пожалуйста начинающему, на какой скрипте можно реализовать следующее:
Выбираем из списка наименование, открывается другой и по выбору из второго списка открывается ниже поле с описанием. Что то вроде скрипта выбора города, где выбирается страна потом город и открывается поле с описанием города. Спасибо. |
это делается с помощью ajax'a.
Сначала выводишь основной список. Потом по "change" обращаешься к обработчику и передаешь ему выбранное значение. В зависимости от этого значения, обработчик отдаёт новый второй список. И по "change" по второму списку — добавляешь поле :) в принципе, селекты и прочее я б не советовал тут использовать. В таких делах обычно требуется хорошая стилизация. Лучше просто html списки (ul>li). |
Цитата:
|
ну вот пример с обычными списками:
http://htmlweb.ru/ajax/example/region.php там очень хорошо расписано всё.. с html списками я погорячился, начинающему трудновато будет реализовать. попробуйте для начала этот вариант, он проще для понимания. а потом уже по этому же принципу заменяйте <select><option>Пункт списка</option></select> на <ul><li>Пункт списка</li></ul> |
Цитата:
<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>
|
нее, это у вас совсем другое...
сейчас гостей выпровожу и набросаю вам скрипт) |
Ок...я понимаю что другое))): но как начинающему для реализации задуманного))):
Мне вот такая форма как здесь http://www.hotstart.com/home/products/in-block-heaters/ вообще то нужна, но там я как понимаю на jQuery реализовано, а хотелось бы попроще без подвязывания к библиотекам и прочему. |
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'>");
}
?>
|
Супер! спасибо огромное. Попробую теперь реализовать написанное :)
|
| Часовой пояс GMT +3, время: 08:54. |