Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамические списки. Как сбросить? (https://javascript.ru/forum/dom-window/53196-dinamicheskie-spiski-kak-sbrosit.html)

karnitsky 24.01.2015 17:45

Динамические списки. Как сбросить?
 
Проблема со списками.
Если выбрать "Один > Два > Три",
После возвращаемся в начало, выбрав "Другой"
и
Если выбрать снова "Один > Два", то "Три" не отображается и нужно выбрать что-то другое из списка, тогда отобразится "Три".

Как сделать, чтобы при выборе "Другой Х", "Два" по умолчанию сбрасывался на "Сбросить на этот"?

Простите меня за один, два, три.. просто не знаю как объяснить, не знаю js. Несколько часов мучился пока сделал работающий динамический список, только эту проблему не получается решить.

<select name="select1" id="select1" onchange="change_select(this)">
 <option value="0" selected="">-- Все --</option>
 <option value="1">Один</option>
 <option value="2">Другой</option>
 <option value="3">Другой 2</option>
 <option value="4">Другой 3</option>
</select>

<select name="select2" id="select2" onchange="change_select(this)" style="display:none">
<option value="5" selected="">Сбросить на этот</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">Два</option>
<option value="9">9</option>
</select>

<select name="select3" id="select3" onchange="change_select(this)" style="display:none">
<option value="10" selected="">Три</option>
<option value="11">Три 2</option>
<option value="12">Три 3</option>
<option value="13">Три 4</option>
<option value="14">Три 5</option>
<option value="15">Три 6</option>
</select>

<select name="select4" id="select4" onchange="change_select(this)" style="display:none">
<option value="16" selected="">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
</select>

<select name="select5" id="select5" onchange="change_select(this)" style="display:none">
<option value="20" selected="">20</option>
</select>

<select name="select6" id="select6" onchange="change_select(this)" style="display:none">
<option value="21" selected="">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>

<script type="text/javascript">
function change_select(elem) {
   switch (elem.value) {
       case '0':
           document.getElementById('select2').style.display = 'none';
		   document.getElementById('select3').style.display = 'none';
           document.getElementById('select4').style.display = 'none';
           document.getElementById('select5').style.display = 'none';
           document.getElementById('select6').style.display = 'none';
           document.getElementById('select0').style.display= 'inline';
           break;
       case '1':
           document.getElementById('select6').style.display= 'none';
           document.getElementById('select5').style.display= 'none';
           document.getElementById('select4').style.display= 'none';
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select2').style.display = 'inline';
           break;
		   
       case '2':
           document.getElementById('select2').style.display = 'none';
		   document.getElementById('select3').style.display = 'none';
           document.getElementById('select5').style.display = 'none';
           document.getElementById('select6').style.display = 'none';
           document.getElementById('select4').style.display= 'inline';
           break;	
		   
       case '3':
           document.getElementById('select2').style.display = 'none';
		   document.getElementById('select3').style.display = 'none';
           document.getElementById('select4').style.display = 'none';
           document.getElementById('select6').style.display = 'none';
           document.getElementById('select5').style.display= 'inline';
           break;	
		   
       case '4':
           document.getElementById('select2').style.display = 'none';
		   document.getElementById('select3').style.display = 'none';
           document.getElementById('select4').style.display = 'none';
           document.getElementById('select5').style.display = 'none';
           document.getElementById('select6').style.display= 'inline';
           break;
		   
       case '5':
           document.getElementById('select6').style.display= 'none';
           document.getElementById('select5').style.display= 'none';
           document.getElementById('select4').style.display= 'none';
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select2').style.display = 'inline';
           break;
		   
       case '6':
           document.getElementById('select6').style.display= 'none';
           document.getElementById('select5').style.display= 'none';
           document.getElementById('select4').style.display= 'none';
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select2').style.display = 'inline';
           break;
		   
       case '7':
           document.getElementById('select6').style.display= 'none';
           document.getElementById('select5').style.display= 'none';
           document.getElementById('select4').style.display= 'none';
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select2').style.display = 'inline';
           break;
		   
       case '8':		
           document.getElementById('select6').style.display= 'none';
           document.getElementById('select5').style.display= 'none';
           document.getElementById('select4').style.display= 'none';	   
           document.getElementById('select2').style.display = 'inline';
           document.getElementById('select3').style.display = 'inline';
		    break;
			
       case '9':
           document.getElementById('select6').style.display= 'none';
           document.getElementById('select5').style.display= 'none';
           document.getElementById('select4').style.display= 'none';
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select2').style.display = 'inline';
           break;		

       default:
          // document.getElementById('select2').style.display = 'none';
		 //  document.getElementById('select3').style.display = 'none';
        //   document.getElementById('select4').style.display= 'none';
   }
}
	</script>


Часовой пояс GMT +3, время: 13:59.