Как добавить группу в Select

[Sserg-135]

Добрый день форумчане!

Подскажите как при помощи JS добавить в список <SELECT> группу <optgroup> ? и как ее можно удалить?

[s0rr0w]

Добрый день форумчане!

Подскажите как при помощи JS добавить в список <SELECT> группу <optgroup> ? и как ее можно удалить?

createElement

appendChild

insertBefore

removeChild

[Sserg-135]

это в какой модели так?

опции seleсt-а я делал так:

document.getElementById(Id).options[num_option]=new Option('valuu','text',false,false);

думаю что и optgroup делаются как-то так)

Edited May 21, 2011 by Sserg-135

[s0rr0w]

это в какой модели так?

опции seleсt-а я делал так:

document.getElementById(Id).options[num_option]=new Option('valuu','text',false,false);

думаю что и optgroup делаются как-то так)

Это вы сделали смесь DOM Level 2 и DOM Level 0

Читайте больше про Level 2. Если с английским хорошо, то лучше посмотреть всякие уроки про манипуляциям с DOM

[Great Rash]

var select = document.getElementById('select');
var optgroup = document.createElement('optgroup');

try {
  // IE6(7)
  select.add(optgroup, select.options[null]);
} catch (e) {
  select.add(optgroup, null);
}

// добавится группа в конец списка
// интерфейс такой: selectObject.add(option, before)

[fan]

Great Rash ие6 знает о существовании optgroup и скриптом может.

Или я чего то не понял?.

[Great Rash]

Ну да, ИЕ6 вроде знает что такое <optgroup>. А разве нет?

[Sserg-135]

var select = document.getElementById('select');
var optgroup = document.createElement('optgroup');

try {
  // IE6(7)
  select.add(optgroup, select.options[null]);
} catch (e) {
  select.add(optgroup, null);
}

// добавится группа в конец списка
// интерфейс такой: selectObject.add(option, before)

А где зесь название оптогрупы писать? и куда вложенные в эту группу опции Selecta добавлять?

[Great Rash]

Вы знаете JS? Вам говорит о чем-нибудь .setAttribute?

Опции можно добавлять внутрь группы это же очевидно

[Sserg-135]

Спасибо, попробую сделать так

[Sserg-135]

не создалась оптогруппа (

[s0rr0w]

не создалась оптогруппа (

Код?

[Sserg-135]

Код?

Такой как написал Great Rash в #5

[Great Rash]

Код HTML, браузер, текст ошибки если есть?

[Sserg-135]

Получилась-таки оптогруппа, просто т.к. она пока без названия, то FF ее просто не отобразил, а плагин Firebug в коде страницы ее уже показывает.

код практически такой-же, как написал Great Rash.

var optgroup = document.createElement('optgroup');
try {
 // IE6(7)
  document.getElementById(Id).add(optgroup, document.getElementById(Id).options[null]);
} catch (e) {
  document.getElementById(Id).add(optgroup, null);
}

Спасибо.

А вот с названием оптогруппы (тэг LABEL)не совсем понял как установить. (если через setAttribute, то какой будет синтаксис?)?

помогите еще чуть-чуть)

Edited June 10, 2011 by Sserg-135

[Great Rash]

var optgroup = document.createElement('optgroup');
optgroup.label = 'my_optgroup';

try {
 // IE6(7)
  document.getElementById(Id).add(optgroup, document.getElementById(Id).options[null]);
} catch (e) {
  document.getElementById(Id).add(optgroup, null);
}

[Sserg-135]

Great Rash, получилось!

Огромное Вам спасибо!

Edited June 15, 2011 by Sserg-135

[Sserg-135]

Рано радовался

теперь проблема очистить список от оптогрупп )))))

ибо

document.getElementById(Id).options.length=0

очищает только элементы списка, но никак не оптогруппы)

что нужно для этого сделать?

[Great Rash]

Учите работу с DOM.

var select = document.getElementsByTagName('select')[0];

while (select.getElementsByTagName('optgroup')) {
	select.removeChild(select.lastChild);
}

[Sserg-135]

помог такой код:

var sel = document.getElementById(Id);
   while (sel.childNodes.length) {
      if (sel.firstChild.tagName == 'OPTGROUP') {
         while (sel.firstChild.childNodes.length) {
	      sel.firstChild.removeChild(sel.firstChild.firstChild);
 	 }
     }
    sel.removeChild(sel.firstChild);
}

полная очистка списка

[Sserg-135]

И опять оказалось не все так просто )

создаю опции Select и оптогруппы в цикле:

for (i=0; i<result.length; i++)
{		.
		.
		.
	// Выделяем признак оптгруппы
	if  (result[i]['code']=='***'){
	 	//** создание optgroup
		var optgroup = document.createElement('optgroup');
		optgroup.label = result[i]['neighborhood'];  // тэг label. заголовок оптгруппы
		try {
			// IE6(7)
			document.getElementById(Id).add(optgroup, document.getElementById(Id).options[null]);
		} catch (e) {
 			document.getElementById(Id).add(optgroup, null);
		}
	}
}

В FF все прекрасно создается, а в IE создается только одна- самая первая optgroup, а которые идут дальше цикле полностью игнорируются. Делаю все тоже самое без цикла (просто ставлю подряд два куска этого кода друг за другом с разными названиями optgroup.label ) и тоже создается только первая оптгруппа, а вторая (т.е. последующие) игнорируется.

В чем может быть проблема?

И кстати в Гугль-Хроме этот код совсем не работает

Edited June 21, 2011 by Sserg-135

[Sserg-135]

пока пришел к выводу, что IE не хочет создавать подряд optgroup-ы через JS, между ними должен находится тэг <option value=nnn >...</option>, причем не созданный через скрипт JS (я его создаю таким кодом:

document.getElementById(Id).options[num_option]=new Option('опция N',value,false,false))

, а написанный непосредственно в html.

такая вот ерунда выходит

[Sserg-135]

помогите пожалуйста, никак не получается

[Great Rash]

Чота .add() и правда не хочет работать как надо в ИЕ, да и в Хроме тоже...

<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

	<script type="text/javascript">
		window.onload = function() {
			var select = document.getElementById('test');

			for (var i = 0; i < 10; i++) {
				var group = document.createElement('optgroup');
				group.label = 'group ' + i;

				for (var j = 0; j < 3; j++) {
					var opt = document.createElement('option');
					opt.value = j;

					try {
						opt.innerText = 'option ' + j; // stupid IE7
					} catch (e) {
						opt.text = 'option ' + j;
					}

					group.appendChild(opt);
				}

				select.appendChild(group);
			}
		}
	</script>
</head>
<body>

	<select name="test" id="test"></select>

</body>
</html>

[Sserg-135]

Great Rash, спасибо за код, в IE и в Хроме группы появились, но теперь в FF не видны названия самих опций ))

[Sserg-135]

Great Rash, теперь все сделал: опции добавляю через

document.getElementById(Id).options[num_option]=new Option('name','value', false, false);

а оптогруппы как в Вашем последнем коде через :

 document.getElementById(Id).appendChild(group);

пока работает и в лисе и в осле и в хроме

Еще раз спасибо!