Форум

Anneta · #1 (**permalink**) 11.01.2011, 23:23

Я хочу сделать связанные списки, они динамически заполнены, первый список виден, остальные скрыты,что бы при выборе нужного элемента из первого, сделать видимым, только соответствующий ему список. Подскажите пожалуйста, как можно сделать, что бы нужный элемент был виден. Возможно я не так прописываю свойство objSel.document.style.display='';, потому что у меня оно не срабатывает???

функция javascript:

function fn_select_option(el)   {
	var sel = el.options[el.selectedIndex].innerHTML;
        sel.selected=true;
        var objSel = document.getElementById(sel);
        objSel.document.style.display='';
}

взаимосвязанные списки:

<select id="my_select[]" onchange="fn_select_option(this) " >
     <option value="select">Выберите опцию:) </option>
      {foreach from=$product_options item="option" name="vibor_r" }
      <option value="$option.option_name}{$option.option_name}</option>
       {/foreach}
</select>
		
{foreach from=$product_options item="option" name="vibor" }
<select id="{$option.option_name}" style="display:none" >
	{foreach from=$option.variants item="variant"}
	<option class="{$variant.variant_id}" value="{$variant.variant_id}">   {$variant.variant_name}</option>
	{/foreach}
</select>	
{/foreach}

рони · #2 (**permalink**) 12.01.2011, 01:29

Anneta,
objSel.document.style.display=''; красное лишнее
sel.selected=true; а эта странная )))

ksa · #3 (**permalink**) 12.01.2011, 08:54

Anneta, сделай нормальный хтмл пример, на нём можно будет показать чего и как.

Anneta · #4 (**permalink**) 12.01.2011, 16:36

<html>
<head>
<title> title</title>
<script>
function fn_select_option(el)   {
 var sel = el.options[el.selectedIndex].innerHTML;
 var objSel = document.getElementById(sel);
 objSel.style.display='';
}
</script>
</head>
<body>
<form method="post" action="">
<select id="my_select" onchange="fn_select_option(this);" >
    <option value="A">A</option>
	<option value="B">B</option>
</select>
</br>
<select id="A"  style="display:none">
    <option value="1">1 </option>
	<option value="2">2</option>
</select>
<select id="B"  style="display:none">
    <option value="11">11 </option>
	<option value="12">12</option>
</select>        
</form>
</body>
</html>

Вот набросала пример, о чем спрашивала, в таком виде получается, скрытые списки показываются.

В смарти же, у меня все значения динамически подгружаются с помощью цикла foreach, как в первом примере.

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

ksa · #5 (**permalink**) 12.01.2011, 16:50

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

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

Оно?

<!DOCTYPE html>
<html>
<head>
<title> title</title>
<script>
function fn_select_option(el)   {
	var sel = el.options[el.selectedIndex].innerHTML;
	var objSel = document.getElementById(sel);
	var o=document.getElementById('container')
	o=o.getElementsByTagName('select')
	var i
	for (i=0; i<o.length; i++) {
		o[i].style.display='none'
	}
	objSel.style.display='';
}
</script>
</head>
<body>
<form method="post" action="">
<select id="my_select" onchange="fn_select_option(this);" >
    <option value="A">A</option>
	<option value="B">B</option>
</select>
<div id='container'>
	<select id="A"  style="display:none">
	    <option value="1">1 </option>
		<option value="2">2</option>
	</select>
	<select id="B"  style="display:none">
	    <option value="11">11 </option>
		<option value="12">12</option>
	</select>        
</div>
</form>
</body>
</html>

Anneta · #6 (**permalink**) 12.01.2011, 17:20

Оно

как раз то что нужно, но к сожалению в смарти, почему то не работает.
такое ощущение как будто нет реакции на установку в javascript значения

objSel.style.display=' ';

?!?

рони · #7 (**permalink**) 12.01.2011, 19:28

Вариант ...

<!DOCTYPE html>
<html>
<head>
<title> title</title>
<script>
function fn(b) {
    var a = "AB";
        a = a.split("");
        for (i = 0; i < a.length; i++) document.getElementById(a[i]).style.display = a[i] == b ? "" : "none"
   };
</script>
</head>
<body>
<form method="post" action="">
<select id="my_select" onchange="fn(this.value);" >
    <option value="">change</option>
    <option value="A">A</option>
	<option value="B">B</option>
</select>
<div id='container'>
	<select id="A"  style="display:none">
	    <option value="1">1</option>
		<option value="2">2</option>
	</select>
	<select id="B"  style="display:none">
	    <option value="11">11</option>
		<option value="12">12</option>
	</select>
</div>
</form>
</body>
</html>

ksa · #8 (**permalink**) 12.01.2011, 21:21

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

в смарти, почему то не работает

Не понял, где не работает?

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

objSel.style.display=' ';

У тебя там пробел? Нужно пустышку ('') туда присваивать...

Форум

Справочник

Discord чат

Курсы javascript