Javascript-форум - Привязка картинок к динамическим спискам SELECT

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Привязка картинок к динамическим спискам SELECT (https://javascript.ru/forum/dom-window/17631-privyazka-kartinok-k-dinamicheskim-spiskam-select.html)

Привязка картинок к динамическим спискам 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>

Знающие люди, помогите.

Меня тоже интересует этот аспект, только дело несколько проще.

Привязать к последнему списку из syncList1.dataList ссылки.
Т.е при выборе значения из последнего списка , осуществлялся бы переход по url , соответствующему определенному id.

Help!:help:

zerojava,
никак. Select не кастомайзиться. Нужно использовать для этого кастомные селекты.

Цитата:

Сообщение от grenader

при выборе значения из последнего списка , осуществлялся бы переход по url , соответствующему определенному id

Мая твая не панимайт... :blink:

Цитата:

Сообщение от ksa (Сообщение 109000)

Мая твая не панимайт... :blink:

не 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:-E

Возможно вы знаете другое решение моей проблемы? Главное чтобы это были зависимые списки, подошел бы даже вариант с одним двумя вложениями, а не четыре как в моем примере. И как предложил grenader картинка может быть привязана только к последнему select'у, главное чтоб у каждого элемента в последнем select'е были уникальные значения value="" и name=""

zerojava,
В вашем случае лучше делать не SELECT, а DIV и в нем ссылки.
В таком случае можно будеть любий дизайн реализовать.

grenader,
Нет проблем. Привзяывается событие на изминение SELECT, и если выборан последний пункт, то выполнить переход....

Цитата:

Сообщение от `p r o x y (Сообщение 109534)

В вашем случае лучше делать не SELECT, а DIV и в нем ссылки.
В таком случае можно будеть любий дизайн реализовать.

мне не совсем понятно как это, подскажите пожалуйста где можно глянуть рабочий пример с такими DIV'ами

Цитата:

Сообщение от 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'ами

Как вариант в интернете... Ну или мой набросок сделать функциональным самостоятельно... Либо заказать за деньги оный тут. :)

Цитата:

Сообщение от `p r o x y (Сообщение 109534)

grenader,
Нет проблем. Привзяывается событие на изминение SELECT, и если выборан последний пункт, то выполнить переход....

Можно набросать примерно? Я способный, я пойму. onchange(событие на изминение SELECT) , а как дальше, если опираться на код, который я привел выше? :-?

Цитата:

Сообщение от grenader

Я способный, я пойму.

Номер выбраного элемента хранится в selectedIndex, а количество элементов в options.length...

Уррррра, победа

Вот , что вышло. Все работает.:dance:
Думаю, а сложно ли будет сделать тоже самое с тремя селектами, а не с двумя, как тут??? Маэстро, вы как думаете? много кода дописывать?

<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://dalparts.ru/page18.html'; 
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]); 
  
 } 
 
function openURL(){ 
	         window.open(page[j], 'Window title'); 


	    } 
</script>

	   	
</head> 
<body> 
<div align="center"> 

<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> 

<input type="button" onclick="openURL(); return false;" value="Перейти">   

</div>
</body> 
</html>

:victory: