ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать меню динамическое
4 сообщений из 4, страница 1 из 1
Как сделать меню динамическое
    #38576459
Dimmf28
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Dimmf28
Участник
И так мне нужно сделать так что бы в 1 <select> я выбрал 1 из 3 элементов списка , потом если я нажму на + у меня открывается еще один <select> в котором я уже должен выбрать другой элемент но из двух других что остались . У меня получилось сделать почти как надо но как сделать динамичную отброс выбранного елемента я не понимаю . Прикладываю свой скрипт и фотографию результата работы Помогите сделать ...


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="testr" />
	<title>Untitled 2</title>
    <style>
 /* контейнер просто содержит узлы.
 Узел сам будет отвечать за свой отступ */
.Container {
        padding: 0;
        margin: 0;
}

.Container li {
        list-style-type: none; /* убрать кружочки/точечки */
}
/* узел отодвинут от левой стенки контейнера на 18px
    благодаря этим отступам вложенные узлы формируют иерархию
 */
.Node {
    margin-left: 18px;
    zoom: 1; /* спецсвойство против багов IE6,7. Ставит hasLayout */
}

/* Корневой узел от родительского контейнера не отодвинут. 
   Ему же не надо демонстрировать отступом, чей он сын.
   Это правило идет после .Node, поэтому имеет более высокий приоритет 
   Так что class="Node IsRoot" дает margin-left:0
*/ 
.IsRoot {
    margin-left: 0;
}
/* иконка скрытого/раскрытого поддерева или листа
    сами иконки идут дальше, здесь общие свойства
 */
.Expand {
    width: 18px;
    height: 18px;
    /* принцип двухколоночной верстки. */
    /* float:left и width дива Expand + margin-left дива Content */
    float: left; 
}

/* содержание (заголовок) узла */
 .Content {
    /* чтобы не налезать на Expand */
    margin-left:18px;
    /* высота заголовка - как минимум равна Expand 
        Т.е правая колонка всегда выше или равна левой.
        Иначе нижний float будет пытаться разместиться на получившейся ступеньке
    */    
    min-height: 18px; 
}

 /* все правила после * html выполняет только IE6 */
* html .Content {
    height: 18px; /* аналог min-height для IE6 */
}
/* открытое поддерево */
.ExpandOpen .Expand {  
    background-image: url(minus.gif);
}

/* закрытое поддерево */
.ExpandClosed .Expand {
    background-image:url(plus.gif);
}

/* лист */
.ExpandLeaf .Expand {
    background-image: url(file:///C|/Users/Skoretskiy/Desktop/leaf.gif);
}
.Node {
    margin-left: 18px;
    zoom: 1;
    /* линия слева образуется повторяющимся фоновым рисунком */
    background-image : url(file:///C|/Users/Skoretskiy/Desktop/i.gif);
    background-position : top left;
    background-repeat : repeat-y;
}
/* это правило - ниже .Node, поэтому имеет больший приоритет */
.IsLast {
    /* добавить соединительную черточку наверх */
    background-image: url(file:///C|/Users/Skoretskiy/Desktop/i_hulf.gif);
    background-repeat : no-repeat;
}
.ExpandOpen .Container {
	display: block;
}

.ExpandClosed .Container {
	display: none;
}
.ExpandOpen .Expand, .ExpandClosed .Expand {
	cursor: pointer; /* иконки скрытия-раскрытия */
}

.ExpandLeaf .Expand {
	cursor: auto; /* листовой узел */
}

    
    </style>
</head>

<body>


<div onclick="tree_toggle(arguments[0])">
<div>Make a choice</div>
<ul class="Container">
  <li class="Node IsRoot ExpandClosed"> 
    <div class="Expand"></div>
    <div class="Content">
    

<form action="mail.php" method="post">
<select name=color>
<option></option></option>
<option value=1>Товар</option>
<option value=2>Договор</option>
<option value=3 >Клиент</option>
</select>
<input type=submit value="Выбрать">
</form>

    </div>

    <ul class="Container">
    
      <li class="Node ExpandClosed">
      
        <div class="Expand"></div>
        <div class="Content"><select name=color>
<option></option></option>
<option value=1>Товар</option>
<option value=2>Договор</option>
<option value=3 >Клиент</option>
</select></div>
         <ul class="Container">
    
      <li class="Node ExpandClosed">
      
        <div class="Expand"></div>
        <div class="Content">Item 1.1</div>
        <ul class="Container">
          <li class="Node ExpandLeaf IsLast">
            <div class="Expand"></div>
            <div class="Content">Item 1.1.2</div>
          </li>
        </ul>
      </li>

    </ul>
      </li>

    </ul>
  </li>


</ul>

</div>

</body>
</html>
<script type="text/javascript">
function tree_toggle(event) {
	event = event || window.event
	var clickedElem = event.target || event.srcElement

	if (!hasClass(clickedElem, 'Expand')) {
		return // клик не там
	}

	// Node, на который кликнули
	var node = clickedElem.parentNode
	if (hasClass(node, 'ExpandLeaf')) {
		return // клик на листе
	}

	// определить новый класс для узла
	var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
	// заменить текущий класс на newClass
	// регексп находит отдельно стоящий open|close и меняет на newClass
	var re =  /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
	node.className = node.className.replace(re, '$1'+newClass+'$3')
}


function hasClass(elem, className) {
	return new RegExp("(^|\\s)"+className+"(\\s|$)").test(elem.className)
}
</script>
...
Рейтинг: 0 / 0
03.03.2014, 00:13
| Ответить | Цитировать | Написать  
Как сделать меню динамическое
    #38576508
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Dimmf28мне нужно сделать так ...
Напиши свой селект.
...
Рейтинг: 0 / 0
03.03.2014, 08:26
| Ответить | Цитировать | Написать  
Как сделать меню динамическое
    #38576528
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Dimmf28,

???
 
Работает в нормальных браузерах и IE9 +
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
li, ul{
	list-style:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li ul{
	margin-left:16px;
	height:0;
}
input[type="checkbox"]{
	display:none;
}
li input:checked ~ ul {
	height:auto;
}
input + label:before {
	content:"";
	display:inline-block;
	height:16px;
	width:16px;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + label:before{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
input + label {
	cursor:pointer;
}
</style>
</head>
<body>
<ul>
	<li>
		<input type="checkbox" id="chk1">
		<label for="chk1">
			<select id="first">
				<option value=1>Товар</option>
				<option value=2>Договор</option>
				<option value=3 >Клиент</option>
			</select>
		</label>
		<ul>
			<li>
				<input type="checkbox" id="chk2"> <label for="chk2"> <select id="second"> <option>Договор</option> <option>Клиент</option> </select> </label>
				<ul>
					<li>Пункт 1_1</li>
					<li>Пункт 1_2</li>					
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
<script>
var m1 = 'Договор, Клиент'.split(', ');
var m2 = 'Товар, Клиент'.split(', ');
var m3 = 'Товар, Договор'.split(', ');
var two = [m1,m2,m3]
document.getElementById('first').onchange = function(){
	var sec =  document.getElementById('second'),
	j = this.value;
	sec.options.length = 0;
	if (j) {
		var options = two[--j];
		for (var i = 0; i < options.length; i++) {
			sec.options[i] = new Option(options[i], i); ;
		}
		sec.style.display = "inline-block";
	}
}
</script>
</html>

...
Рейтинг: 0 / 0
03.03.2014, 09:23
| Ответить | Цитировать | Написать  
Как сделать меню динамическое
    #38576617
Dimmf28
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Dimmf28
Участник
user89,спасибо
...
Рейтинг: 0 / 0
03.03.2014, 11:24
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать меню динамическое
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=106&tid=1447351]:
 0ms
get settings:
 5ms
get forum list:
 8ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 52ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 76ms
get tp. blocked users:
 2ms
others: 217ms
total:  373ms
созд. / загр.: 373ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]