Построение списка select с помощью JS в Opera 9.0

zest · December 26, 2007

Здраствуйте!

Задача такова - нужно менять формат времени с "00:00" на "1 PM" и обратно.

И выводить список часов в select

Все строится с помощию JavaScript.

Кроме-того при смене формата времени, установленное в select значение должно сохраняться, а не сбрасываться на первое.

Когда я с помощью того же самого JavaScript пытаюсь выбрать нужный элемент в списке, появляются лишние пустые options, которые являются всего лишь визуальными (на самом деле количество options такое какое и должно быть, т.е. 24).

Причем этот косяк возникает только в Опере. Если не устанавливать принудительно selected элемент, все работает нормально.

В чем может быть проблема? Помогите, пожалуйста, разобраться.

Заранее большое спасибо.

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<form action="">
<input type="radio" name="r" id="r1" value="1" /> PM 
<input type="radio" name="r" id="r2" value="2" /> 00 

<select id="sel" name="sel">
</select>
</form>
<script>


	function SetTimeFormat(WorkdayContainer, WorkdayValue, TimeFormat) {

		var k = 0;
		var hour = "";
		var selected = "";
		var time = "";

		WorkdayContainer.options.length=0;

		for (var i=0; i<24; i++) {
			opt = document.createElement("option");


			if (TimeFormat == 1) {
				if (i==12) k=0;
				if (k==0) hour=12;
				else hour=k;

				time = hour + ((i<12) ? " AM" : " PM");

				k++;
			} else if (TimeFormat == 2) {
				time = (i<10) ? ("0"+i+":00") : (i+":00");
			}

			opt.value = i;

		 WorkdayContainer.appendChild(opt);
 opt.text = time;

 if (i == WorkdayValue) opt.selected = true;
			else opt.selected = false;
		}
		//WorkdayContainer.options[WorkdayValue].selected = true;
	}
	var sel = document.getElementById('sel');
	var r1 = document.getElementById('r1');
	var r2 = document.getElementById('r2');		
		r1.onclick = function () {
			SetTimeFormat(sel, 10, 1);
		}
		r2.onclick = function () {
			SetTimeFormat(sel, 10, 2);	
		}
SetTimeFormat(sel, 10, 2);
</script>
</body>
</html>

Dimitry Wolotko · December 26, 2007

IE7 Тоже косячит ...

zest · December 26, 2007

Да в ИЕ не выводился текст option-а. Исправлено. Сейчас код должен работать в ИЕ корректно.

И вопрос кстати возникает по этому поводу

Как будет корректнее поступать?

Сначала строить элемент - document.createElement("option");

затем назначать ему родителя - WorkdayContainer.appendChild(opt);

и только потом присваивать ему свойства value, text и пр.

или

Сначала строить элемент, потом назначать свойства и только потом назначать родителя.

????

zest · December 27, 2007

Как оказалось, подобное поведение списка в Опере - это известный баг браузера

Решение проблемы можно найти здесь http://www.tigir.com/javascript_select.htm

Sign In

Построение списка select с помощью JS в Opera 9.0

Question

zest

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

zest

Link to comment

Share on other sites

zest

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information