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

Дикс · 29 Feb 2008

есть вот такой скрипт.

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

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

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

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

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

Как это пофиксить?
Code:
 <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 Feb 2008

на maxthone так же???

Сорри за оффтоп!

astrologer · 29 Feb 2008

Code:

document.getElementById(slot).options.length = day_num;

=)))
---------------------------------------

Code:

<!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>

Дикс · 2 Mar 2008

Благодарю

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

Code:

<!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').value); // получили введённый год

    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>

Дикс · 2 Mar 2008

и всё-таки твой код пришлось поправить - у генерируемых элементов не были заданы значения и их нельзя было получить через POST.

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

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

заменил на

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

Дикс · 2 Mar 2008

хотя и щас блин в POST-дате не появляется переменная date_day =\\\

Дикс · 2 Mar 2008

вот, уменьшенный код - тут остаётся тока вставить его в php-файл и нажать сабмит.
тогда выведется всё содержимое массива POST и будет видно что дата отсутствует. Помогите с этим разобраться, пожалуйста!

PHP:

<?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.backgroundColor = '#FFFFCC'; else document.getElementById(element).style.backgroundColor = '#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').value); 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').options[document.getElementById('date_month').selectedIndex].value)" /> </td> </tr> <tr style="height: 50px"> <td> </td><td style="vertical-align: bottom"><input type="submit" value="submit" /> <input type="reset" value="reset" /></td> </tr> </table> </form> </body> </html>

astrologer · 2 Mar 2008

PHP:

<?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> </td><td style="vertical-align: bottom"><input type="submit" value="submit" /> <input type="reset" value="reset" /></td> </tr> </table> </form> </body> </html>

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

Дикс Elder - Старейшина

Conquerstador Banned

astrologer Elder - Старейшина

Дикс Elder - Старейшина

Дикс Elder - Старейшина

Дикс Elder - Старейшина

Дикс Elder - Старейшина

astrologer Elder - Старейшина

Useful Searches

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

Дикс Elder - Старейшина

Conquerstador Banned

astrologer Elder - Старейшина

Дикс Elder - Старейшина

Дикс Elder - Старейшина

Дикс Elder - Старейшина

Дикс Elder - Старейшина

astrologer Elder - Старейшина