PDA

Просмотр полной версии : Опера коряво обновляет элементы списка

Дикс
29.02.2008, 14:06
есть вот такой скрипт.

последовательность действий, чтобы понять в чём мой вопрос:

1. открываем страницу в ИЕ6
2. щёлкаем по February
3. первый алерт - сколько дней нужно сделать во втором выпадающем списке.
второй алерт - сколько сейчас элементов во втором выпадающем списке.
третий алерт - сколько стало элементов после работы js-функции.
4. щёлкаем по "length" - видим сколько сейчас элементов во втором списке.

Получили что хотели - второй список изменился с 31 элемента на 28.

То же самое делаем в ФФ.
Всё работает без проблем.

А теперь в Опере (у меня Version 9.25 Build 8827)
Второй список приобретает множество пустых элементов!

Как это пофиксить?




<script type="text/javascript">

function createDate(days, slot){

var day_num = 31;
if(days == 1 || days == 3 || days == 5 || days == 7 || days == 8 || days == 10 || days == 12) day_num = 31;
if(days == 4 || days == 6 || days == 9 || days == 11) day_num = 30;
if(days == 2) day_num = 28;
alert(day_num)
alert(document.getElementById(slot).options.length )
document.getElementById(slot).options.length = day_num;
alert(document.getElementById(slot).options.length )
for(i=0; i<32; i++)
if(i < day_num){
document.getElementById(slot).options[i] = new Option(i+1,i+1);
}
else{
document.getElementById(slot).options[i] = null;
}
}

</script>



<select id="date_month" name="date_month" onchange="createDate(this.options[this.selectedIndex].value, 'date_day');" >
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>Juny</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>


<select id="date_day" name="date_day">
<script language="javascript">
for(i=0; i<31; i++)
document.getElementById('date_day').options[i] = new Option(i+1,i+1);
</script>
</select></p>



<span onclick="alert(document.getElementById('date_day').options. length)">lenght</span>
Conquerstador
29.02.2008, 14:50
на maxthone так же???

Сорри за оффтоп!
astrologer
29.02.2008, 18:10
document.getElementById(slot).options.length = day_num; =)))
---------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

function get_selected(id)
{
var node = document.getElementById(id);
return node.options[node.selectedIndex].value;
}

function createDate(year, month, slot_id)
{
var date = new Date();
date.setMonth(month);
date.setFullYear(year || date.getFullYear());
date.setDate(32);

var days = 32 - date.getDate(),
slot = document.getElementById(slot_id),
list = document.createElement('select'), o, t, i;

for(i = 1;i<=days;i++)
{
o = document.createElement('option');
t = document.createTextNode(i);


list.appendChild(o);
o.appendChild(t);
}

slot.parentNode.replaceChild(list, slot);
list.id = slot_id;
}

window.onload = function()
{
createDate(get_selected('date_year'), get_selected('date_month'), 'date_day');
}

</script>

</head>
<body>

<select id="date_year" name="date_year" onchange="createDate(this.options[this.selectedIndex].value, get_selected('date_month'), 'date_day');" >
<option value='2000'>2000</option>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
<option value='2006'>2006</option>
<option value='2007'>2007</option>
<option value='2008'>2008</option>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
</select>

<select id="date_month" name="date_month" onchange="createDate(get_selected('date_year'), this.options[ this.selectedIndex ].value, 'date_day');" >
<option value='0'>January</option>
<option value='1'>February</option>
<option value='2'>March</option>
<option value='3'>April</option>
<option value='4'>May</option>
<option value='5'>Juny</option>
<option value='6'>July</option>
<option value='7'>August</option>
<option value='8'>September</option>
<option value='9'>October</option>
<option value='10'>November</option>
<option value='11'>December</option>
</select>

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

</body>
</html>
Дикс
02.03.2008, 09:28
Благодарю :)

Я вот его переписал с нуля под себя, посмотрите, кому не лень, на наличие ошибок.
Так вроде всё работает, но может я что-то упустил или сделал коряво.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>test</title>

<script type="text/javascript">

function getValue(id){
var node = document.getElementById(id);
return node.options[node.selectedIndex].value
}


function createDate(month){
var day_slot = document.getElementById('date_day'); // указатель на список дней
var date = new Date(); // создали объект Date
date.setMonth(month); // установили месяц
date.setDate(32); // установили кол-во дней

var year = parseInt(document.getElementById('date_year').valu e); // получили введённый год

if((year < 1920) || (year > date.getFullYear())) // проверили его на валидность
year = date.getFullYear(); // либо установили текущий
date.setFullYear(year); // установили год

var days = 32 - date.getDate(), // кол-во элементов для списка
list = document.createElement('select'), i // создали новый список

for (i = 1; i <= days; i++){
toption = document.createElement('option'); // создали элемент в списке
ttextnode = document.createTextNode(i); // создали текстнод

toption.appendChild(ttextnode); // присоединили текстнод к элементу
list.appendChild(toption); // присоединили элемент к списку
}

day_slot.parentNode.replaceChild(list, day_slot); // заменили текущий список на новый
list.id = 'date_day'; // задали ему нужный id
}

window.onload = function(){
createDate(getValue('date_month')); // создаём список при загрузке документа
}

</script>
</head>

<body>
<input type="text" maxlength="4" value="19" id="date_year" name="date_year" size="4" />

<select id="date_month" name="date_month" onchange="createDate(this.options[this.selectedIndex].value)">
<option value='0'>January</option>
<option value='1'>February</option>
<option value='2'>March</option>
<option value='3'>April</option>
<option value='4'>May</option>
<option value='5'>Juny</option>
<option value='6'>July</option>
<option value='7'>August</option>
<option value='8'>September</option>
<option value='9'>October</option>
<option value='10'>November</option>
<option value='11'>December</option>
</select>

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


</body>

</html>
Дикс
02.03.2008, 12:38
и всё-таки твой код пришлось поправить - у генерируемых элементов не были заданы значения и их нельзя было получить через POST.

for (i = 1; i <= days; i++){
toption = document.createElement('option'); // создали элемент в списке
ttextnode = document.createTextNode(i); // создали текстнод

toption.appendChild(ttextnode); // присоединили текстнод к элементу
list.appendChild(toption); // присоединили элемент к списку
}
заменил на
for (i = 1; i <= days; i++){
toption = document.createElement('option');
toption.value = i;
toption.text = i;
list.appendChild(toption);
}
Дикс
02.03.2008, 12:45
хотя и щас блин в POST-дате не появляется переменная date_day =\\\
Дикс
02.03.2008, 12:58
вот, уменьшенный код - тут остаётся тока вставить его в php-файл и нажать сабмит.
тогда выведется всё содержимое массива POST и будет видно что дата отсутствует. Помогите с этим разобраться, пожалуйста!

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>admin utility</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<script type='text/javascript'>

// highlight active input field
function highlight(element, mode){
if(mode == 'enable')
document.getElementById(element).style.backgroundC olor = '#FFFFCC';
else
document.getElementById(element).style.backgroundC olor = '#FFF';
}


// birthday functions -----------------

// update days list
function createDate(month){
var day_slot = document.getElementById('date_day');
var date = new Date();
date.setMonth(month);
var year = parseInt(document.getElementById('date_year').valu e);

if((year < 1920) || (year > date.getFullYear()))
year = date.getFullYear();
date.setFullYear(year);
date.setDate(32);
var days = 32 - date.getDate(),
list = document.createElement('select'), i

for (i = 1; i <= days; i++){
toption = document.createElement('option');
toption.value = i;
toption.text = i;
list.appendChild(toption);
}

day_slot.parentNode.replaceChild(list, day_slot);
list.id = 'date_day';
}

function getValue(id){
var node = document.getElementById(id);
return node.options[node.selectedIndex].value
}

window.onload = function(){
createDate(getValue('date_month'));

}
</script>
<h3>Add user</h3>
<form name="newuser" method="POST" onSubmit="return validate()">
<table border="0" >



<tr>
<td>birthday:</td>
<td>
<select id="date_month" name="date_month" onchange="createDate(this.options[this.selectedIndex].value)" >
<option value='0'>January</option>
<option value='1'>February</option>
<option value='2'>March</option>
<option value='3'>April</option>
<option value='4'>May</option>
<option value='5'>Juny</option>
<option value='6'>July</option>
<option value='7'>August</option>
<option value='8'>September</option>
<option value='9'>October</option>
<option value='10'>November</option>
<option value='11'>December</option>

</select>

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

<input type="text" maxlength="4" value="19" id="date_year" name="date_year" size="4" onBlur="createDate(document.getElementById('date_month').o ptions[document.getElementById('date_month').selectedInde x].value)" />
</td>
</tr>

<tr style="height: 50px">
<td>&nbsp;</td><td style="vertical-align: bottom"><input type="submit" value="submit" />&nbsp;<input type="reset" value="reset" /></td>
</tr>
</table>
</form>
</body>
</html>
astrologer
02.03.2008, 14:38
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>admin utility</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script type='text/javascript'>

// birthday functions -----------------

// update days list
function createDate(month)
{
var day_slot = document.getElementById('date_day');
var date = new Date();
date.setMonth(month);
var year = parseInt( document.getElementById('date_year').value );

if((year < 1920) || (year > date.getFullYear())) year = date.getFullYear();
date.setFullYear(year);
date.setDate(32);
var days = 32 - date.getDate(),
list = document.createDocumentFragment(), o, t, i;

while (day_slot.hasChildNodes())
{
day_slot.removeChild(day_slot.firstChild);
}

for (i = 1; i <= days; i++)
{
o = document.createElement('option');
t = document.createTextNode(i);
o.value = i;
list.appendChild(o);
o.appendChild(t);
}

day_slot.appendChild(list);
}

function getValue()
{
var a = arguments;
if(!a[0]) return;
if(typeof a[0] == 'string')
{
var node = document.getElementById(a[0]);
return node.options[node.selectedIndex].value;
}
else if(a[0].nodeName)
{
return a[0].options[a[0].selectedIndex].value;
}
}

window.onload = function()
{
createDate(getValue('date_month'));
}
</script>

</head>
<body>

<h3>Add user</h3>
<form name="newuser" method="POST">
<table border="0">

<tr>
<td>Birthday:</td>
<td>
<select id="date_month" name="date_month" onchange="createDate(getValue(this))">
<option value='0'>January</option>
<option value='1'>February</option>
<option value='2'>March</option>
<option value='3'>April</option>
<option value='4'>May</option>
<option value='5'>Juny</option>
<option value='6'>July</option>
<option value='7'>August</option>
<option value='8'>September</option>
<option value='9'>October</option>
<option value='10'>November</option>
<option value='11'>December</option>
</select>

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

<input type="text" maxlength="4" value="19" id="date_year" name="date_year" size="4" onblur="createDate(getValue('date_month'))" />
</td>
</tr>

<tr style="height: 50px">
<td>&nbsp;</td><td style="vertical-align: bottom"><input type="submit" value="submit" />&nbsp;<input type="reset" value="reset" /></td>
</tr>
</table>
</form>
</body>
</html>