Форум

katenka451 · #1 (**permalink**) 27.01.2010, 16:49

Здравствуйте, возникла следующая проблема. В Internet Explorer не работает событие change для элемента select. Обгуглила весь интернет, многие жалуются, но решения найти не могу.
Есть следующий код:

$('#cities').change(function(){
       var1 = $('#cities').val();
       $.ajax({
           url: "load_streets.php",
           async: true,
           type: 'post',
           data: 'particular_id=' + var1,
           success: function(data){
           $('#streets').replaceWith(data);
           }    
      });
});

Им я заменяю имеющийся select на select, куда подгружаются данные из базы. Но суть не в этом, а в том, что по событию change ничего не происходит, не срабатывает даже alert. В FireFox работает отлично, а в IE (любой версии) никак.
Использую jquery 1.4.
Буду очень благодарна за любую помощь! Бьюсь над этим вопросом почти месяц(((.

e1f · #2 (**permalink**) 27.01.2010, 16:54

и? больше кода в студию, и желательно отформатировать: http://javascript.ru/formatting/

katenka451 · #3 (**permalink**) 27.01.2010, 17:00

Какого кода? Могу добавить только имеющийся select (php):

echo '<select id="cities" name="cities">';
                        $query_cities = mysql_query('SELECT cities_id, cities_name FROM cities ORDER BY cities_name');
			while ($cities = mysql_fetch_array($query_cities))
			 {
				echo '<option';
                                if (($cities['cities_id'] == 5) || ($cities['cities_name'] == 'Тверь'))
                                    echo ' value="'.$cities['cities_id'].'" selected>'.$cities['cities_name'].'</option>';
                                else
                                    echo ' value="'.$cities['cities_id'].'">'.$cities['cities_name'].'</option>';
			 }
			echo '</select>';
                        //Подгружаем названия улиц в зависимости от выбранного города
                        echo '<br /><br />Улица*<br />';
                        echo '<select id="streets" name="streets">';
                        echo '<option value="-1"> </option>';
                                $query_streets = mysql_query ('SELECT cities_id, cities_name, streets_type_id, streets_type_short, streets_id, streets_name, streets_streets_type_id,streets_cities_id FROM cities, streets, streets_type WHERE cities_id=streets_cities_id AND streets_type_id=streets_streets_type_id ORDER BY cities_name, streets_name');
                                while ($streets = mysql_fetch_array($query_streets))
                                {
                                        echo '<option';
                                        echo ' value="'.$streets['streets_id'].'">'.$streets['streets_name'].', '.$streets['streets_type_short'].'</option>';
                                }
                         echo '</select>';

По идее при выборе города должен меняться список улиц. В мозилле так и происходит, а в IE пишет, что в jquery обнаружена ошибка.

subzey · #4 (**permalink**) 27.01.2010, 17:15

Чтобы jQ мог выбрать элемент, он должен уже присутствовать на странице, убедитесь, что к моменту выполнения этот селект на странице уже есть.

Пример:

<script>alert(document.getElementById("my")) // null</script>
<select id="my"></select>
<script>alert(document.getElementById("my")) // [object HTMLSelectElement]</script>

e1f · #5 (**permalink**) 27.01.2010, 17:16

Такс. Вот пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>test</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript"><!--
$(function(){
    $('#cities').change(function(){
        $('#streets').replaceWith('<select id="streets"><option>new one</option><option>new two</option><option>new three</option></select>')
    })
})
--></script>
</head>

<body>

<select id="cities">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>	

<select id="streets">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</body>

</html>

Работает. Давайте ссылку на проблемную страницу, чтобы посмотреть, что там не так.

katenka451 · #6 (**permalink**) 27.01.2010, 17:37

Спасибо за ответы, надо над ними подумать. Событие change в Вашем коде, уважаемый e1f, сработало, но новые значения не подгрузило. Но, если событие сработало, значит, где-то мой косяк.
Ссылку на страницу, к сожалению, дать не могу, еще никуда не выкладывала.

e1f · #7 (**permalink**) 27.01.2010, 17:47

То есть не подгрузило? Значения в селекте не поменялись?

katenka451 · #8 (**permalink**) 27.01.2010, 18:21

Проблема решилась довольно странным образом. У меня есть файл с функциями на js. Данный кусочек скрипта с аяксом стоял в самом конце этого файла. Стоило перенести его в начало, как ie наконец-то начал его кушать. После стольких мучений нет сил радоваться, да и напрягает тот факт, что причина проблемы так и осталась неясна.

Форум

Справочник

Discord чат

Курсы javascript