27.05.2011, 00:13
|
|
Интересующийся
|
|
Регистрация: 26.05.2011
Сообщений: 20
|
|
|
Привязка картинок к динамическим спискам SELECT
Всем доброй ночи! Есть работающий скрипт динамических списков сделанный на основе этого примера. Значение в следующем селекте зависит от значения в предыдущем и т.д. Подскажите пожалуйста как сделать чтобы каждому пункту в списках соответствовала свая картинка, которая отображалась бы рядом?
В яваскрипте я к сожалению не разбираюсь, поэтому если кто знает где есть похожий пример зависимых списков с картинками просьба поделиться ссылкой!
<script type="text/javascript">
function syncList(){}
syncList.prototype.sync = function()
{
for (var i=0; i < arguments.length-1; i++) document.getElementById(arguments[i]).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments[i], arguments[i+1]);
document.getElementById(arguments[0]).onchange();
}
syncList.prototype._sync = function (firstSelectId, secondSelectId)
{
var firstSelect = document.getElementById(firstSelectId);
var secondSelect = document.getElementById(secondSelectId);
secondSelect.length = 0;
if (firstSelect.length>0)
{
var optionData = this.dataList[ firstSelect.options[firstSelect.selectedIndex==-1 ? 0 : firstSelect.selectedIndex].value ];
for (var key in optionData || null) secondSelect.options[secondSelect.length] = new Option(optionData[key], key);
if (firstSelect.selectedIndex == -1) setTimeout( function(){ firstSelect.options[0].selected = true;}, 1 );
if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true;}, 1 );
}
secondSelect.onchange && secondSelect.onchange();
};
</script>
<select id="List1">
<option value="s1">1</option>
<option value="s2">2</option>
</select>
<select id="List2"></select>
<select id="List3"></select>
<select id="List4"></select>
<script type="text/javascript">
var syncList1 = new syncList;
syncList1.dataList = {
's1':{
's11':'11',
's12':'12'
},
's2':{
's21':'21',
's22':'22'
},
's11':{
's111':'111',
's112':'112'
},
's12':{
's121':'121',
's122':'122'
},
's21':{
's211':'211',
's212':'212'
},
's22':{
's221':'221',
's222':'222'
},
's111':{
'4.8':'1111',
'5.1':'1112'
},
's112':{
'5':'1121',
'5.1':'1122'
},
's121':{
'3.5':'1211',
'3.8':'1212'
},
's122':{
'3.5':'1221',
'3.8':'1222'
},
's211':{
'4.8':'2111',
'5.1':'2112'
},
's212':{
'5':'2121',
'5.1':'2122'
},
's221':{
'3.5':'2211',
'3.8':'2212'
},
's222':{
'3.5':'2221',
'3.8':'2222'
},
};
syncList1.sync("List1","List2","List3","List4");
</script>
|
|
15.06.2011, 18:59
|
|
Новичок на форуме
|
|
Регистрация: 15.06.2011
Сообщений: 6
|
|
|
Знающие люди, помогите.
Меня тоже интересует этот аспект, только дело несколько проще.
Привязать к последнему списку из syncList1.dataList ссылки.
Т.е при выборе значения из последнего списка , осуществлялся бы переход по url , соответствующему определенному id.
Help!  |
|
16.06.2011, 10:29
|
|
Профессор
|
|
Регистрация: 01.02.2010
Сообщений: 364
|
|
|
zerojava,
никак. Select не кастомайзиться. Нужно использовать для этого кастомные селекты.
|
|
16.06.2011, 11:04
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
|
Сообщение от grenader
|
|
при выборе значения из последнего списка , осуществлялся бы переход по url , соответствующему определенному id
|
Мая твая не панимайт...  |
|
16.06.2011, 19:04
|
|
Новичок на форуме
|
|
Регистрация: 15.06.2011
Сообщений: 6
|
|
Сообщение от ksa
|
|
Мая твая не панимайт...
|
не id , а пункту последнего селекта. в общем -то я нашел решение на другом форуме.
и вот код,который приводится
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language=javascript>
server = new Array();
server['server1'] = new Array();
server['server1']=[['server1_page0', 'Выбор серии'],['server1_page1', '1 серия'], ['server1_page2', '2 серия'], ['server1_page3', '3 серия'], ['server1_page4', '4 серия'],['server1_page5', '5 серия'],['server1_page6', '6 серия'],['server1_page7', '7 серия'],['server1_page8', '8 серия'],['server1_page9', '9 серия'],['server1_page10', '10 серия'],];
server['server2']=[['server2_page0', 'Выбор серии'],['server2_page1', 'ova 1'], ['server2_page2', 'ova 2'], ['server2_page3', 'ova 3'], ['server2_page4', 'ova 4'],['server2_page5', 'ova 5'],['server2_page6', 'ova 6'],];
server['server3']=[['server3_page0', 'Выбор серии'],['server3_page2', '131 серия'],['server3_page2', '132 серия'],['server3_page3', '133 серия'],['server3_page4', '134 серия'],['server3_page5', '135 серия'],['server3_page6', '136 серия'],['server3_page7', '137 серия'],['server3_page8', '138 серия'],['server3_page9', '139 серия'],['server3_page10', '140 серия'],['server3_page11', '141 серия'],]
page = new Array();
page['server1_page1'] = 'http://video.rutube.ru/9972828c1e8376034258b37b9a286156';
page['server1_page2'] = 'http://video.rutube.ru/9972828c1e8376034258b37b9a286156';
page['server1_page3'] = 'http://video.rutube.ru/f4de18e1522561f21be159641ee193aa';
page['server1_page4'] = 'http://video.rutube.ru/61a1a93db03edeaa299aa9eeefec60b6';
page['server1_page5'] = 'http://video.rutube.ru/25859d9d877683d1c5dd9f20b1797174';
page['server1_page6'] = 'http://video.rutube.ru/0b645a696ab9601084642d905600cca3';
page['server1_page7'] = 'http://video.rutube.ru/34a3f9715a9ee3331c308a8995395a29';
page['server1_page8'] = 'http://video.rutube.ru/653abc6c6b30234af418657553a7191a';
page['server1_page9'] = 'http://video.rutube.ru/19bcbdfbf53df5d6d5603590051d99e4';
page['server1_page10'] ='http://video.rutube.ru/a0ec5e68a53dc0509082d26b992c54a1';
page['server1_page11'] ='http://video.rutube.ru/c7a06084814ed3d4337e236fce297ee5';
page['server2_page1'] = 'http://video.rutube.ru/8053af107e008f63921dee1ff99c8c02';
page['server2_page2'] = 'http://video.rutube.ru/bda0662abf729b41243ce4561336d7a8';
page['server2_page3'] = 'http://video.rutube.ru/28cf8c4aaec12a752ebe2a81fff34ea0';
page['server2_page4'] = 'http://video.rutube.ru/7d361e23e1621ea2996767fc7b78ef70';
page['server2_page5'] = 'http://video.rutube.ru/72f2ee9ecc4492bb5fd52d81420f809f';
page['server2_page6'] = 'http://video.rutube.ru/bbbe0aae80e2d1ef0d2672b472221fa4';
page['server3_page1'] = 'http://video.rutube.ru/30a5fa0751fcc8e83d817fb9a8d24eef';
page['server3_page2'] = 'http://video.rutube.ru/e5a5c67b1b6012fea9064ef70984248e';
page['server3_page3'] = 'http://video.rutube.ru/8f4f152d5d1540b7ae1352820a353070';
page['server3_page4'] = 'http://video.rutube.ru/c736bd0a18d55e8b68b301d2fd648440';
page['server3_page5'] = 'http://video.rutube.ru/8fe7adcb5ab70616851b2e6760cd8ad7';
page['server3_page6'] = 'http://video.rutube.ru/e53afafa1dde89e827b5fe51f778d18a';
page['server3_page7'] = 'http://video.rutube.ru/f5ba7130522265fef1106c54131389d9';
page['server3_page8'] = 'http://video.rutube.ru/940f3d70528297a2bf9d8c74cf42beda';
page['server3_page9'] = 'http://video.rutube.ru/2c22e3d29152e0ac43b3a6d5cc1f5927';
page['server3_page10'] ='http://video.rutube.ru/6696731c4a52a74309658ca109a9ebc8';
page['server3_page11'] = 'http://video.rutube.ru/c0366663a51fb20eb5433375c122a318';
var s_name;
var n=0;
var el=document.getElementById('menu_page');
function menu_server_select(a)
{
n=0;
var el=document.getElementById('menu_page');
s_name=a;
while (el.childNodes.length>0)
{
el.removeChild(el.childNodes[el.childNodes.length-1]);
}
for(var server_name in server[a])
{
var opt = document.createElement("option");
opt.innerHTML=server[a][server_name][1];
opt.name=n;
el.appendChild(opt);
n++;
}
}
function menu_page_select(a,k)
{
j=server[s_name][k][0];
document.getElementById('page').setAttribute('src', page[j]);
}
</script>
</head>
<body>
<div align="center">
<font color="#1e90ff">Если невозможно выбрать серию,то вам необходимо открыть страницу в любом другом браузере</font>
<table style="border: 1px solid blue; border-collapse: collapse; width: 305px; height: 150px;" align="" width="">
<tr align="center">
<td style="border: 1px solid black;">
<font color="#1e90ff">Для того,чтобы начать необходимо выбрать раздел и № серии</font>
</td>
</tr>
<tr align="center">
<td style="border: 1px solid black;">
<font color="#1e90ff">Также вы можете посетить:</font>
</td>
</tr>
<tr align="center">
<td style="border: 1px solid black;">
<a href="http://capvideo.tk/forum"><font color="#1e90ff">Форум</font></a>
</td>
</tr>
<tr align="center">
<td style="border: 1px solid black;">
<a href="http://2"><font color="#1e90ff">А также раздел новостей</font></a>
</td>
</tr>
</table>
<select id="menu_server" onchange="menu_server_select(this.options[this.selectedIndex].value);">
<option value="" selected="selected">Выбор аниме</option>
<option value="server1">Темнее черного</option>
<option value="server2">Hellsing</option>
<option value="server3">Naruto shippuuden</option>
</select>
<select id="menu_page" onchange="menu_page_select(this.options[this.selectedIndex].value,this.options[this.selectedIndex].name);">
<option value="" selected="selected">Номер серии</option>
</select>
<iframe id="page" height="400px" width="500px"></iframe>
</div>
</body>
</html>
Ответить с цитированием
The Following User Says Thank You to Letmetouchy
речь идет о видео, но почему бы не привязать туда ссылки к картинкам?
Ну и сейчас,безусловно, будет просто состряпать нужный код. Ненавижу сайты без поддержки php и mysql 
|
|
18.06.2011, 23:02
|
|
Интересующийся
|
|
Регистрация: 26.05.2011
Сообщений: 20
|
|
|
Возможно вы знаете другое решение моей проблемы? Главное чтобы это были зависимые списки, подошел бы даже вариант с одним двумя вложениями, а не четыре как в моем примере. И как предложил grenader картинка может быть привязана только к последнему select'у, главное чтоб у каждого элемента в последнем select'е были уникальные значения value="" и name=""
|
|
20.06.2011, 07:12
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.05.2009
Сообщений: 105
|
|
|
zerojava,
В вашем случае лучше делать не SELECT, а DIV и в нем ссылки.
В таком случае можно будеть любий дизайн реализовать.
grenader,
Нет проблем. Привзяывается событие на изминение SELECT, и если выборан последний пункт, то выполнить переход....
|
|
21.06.2011, 12:28
|
|
Интересующийся
|
|
Регистрация: 26.05.2011
Сообщений: 20
|
|
|
Сообщение от `p r o x y
|
В вашем случае лучше делать не SELECT, а DIV и в нем ссылки.
В таком случае можно будеть любий дизайн реализовать.
|
мне не совсем понятно как это, подскажите пожалуйста где можно глянуть рабочий пример с такими DIV'ами |
|
21.06.2011, 12:52
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
|
Сообщение от zerojava
|
|
мне не совсем понятно как это
|
Ну вот как-то так... 
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.slct {
float: left;
}
.options {
border: 1px solid;
}
</style>
<script type="text/javascript">
</script>
</head>
<body onload='Go()'>
<div class='slct'>
<div>
<input type='text' />
<input type='button' value='...' />
</div>
<div class='options'>
<div></div>
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
</div>
</div>
</body>
</html>
|
Сообщение от zerojava
|
|
где можно глянуть рабочий пример с такими DIV'ами
|
Как вариант в интернете... Ну или мой набросок сделать функциональным самостоятельно... Либо заказать за деньги оный тут. |
|
22.06.2011, 12:00
|
|
Новичок на форуме
|
|
Регистрация: 15.06.2011
Сообщений: 6
|
|
|
Сообщение от `p r o x y
|
grenader,
Нет проблем. Привзяывается событие на изминение SELECT, и если выборан последний пункт, то выполнить переход....
|
Можно набросать примерно? Я способный, я пойму. onchange(событие на изминение SELECT) , а как дальше, если опираться на код, который я привел выше?  |
|
|
|
