динамическое добавление option's в select список
здравствуйте.
есть следующая задача и проблема с ее выполнением для браузера ИЕ 8.0 (для других версий не проверяла).
получаю с сервера строку следующего вида: 0,Israel,1,England,2,Germany,3,Italy (т.е. value, text, value, text .... - свойства элемента <option> в списке <select>)
написала свою функцию для парсинга этой строки на JS :
В другой функции заполняю список <select> (после того как ответ с сервера получен):
в гугл хром, в мазилле все работает, в ИЕ получаю пустой список, значения полученные из функции определенны как undifiend. на скрине я вывела содержимое строк полученных с функции ГетКуррентАйтем и индекс : responcetext.length (внутри тела while) ... список пустой получаю, одни пустые строки.
[ATTACH=CONFIG]5060[/ATTACH]
Вопрос: что я сделала не так? и как сделать правильно )
есть следующая задача и проблема с ее выполнением для браузера ИЕ 8.0 (для других версий не проверяла).
получаю с сервера строку следующего вида: 0,Israel,1,England,2,Germany,3,Italy (т.е. value, text, value, text .... - свойства элемента <option> в списке <select>)
написала свою функцию для парсинга этой строки на JS :
Код:
// ----- Global variables ------------------
var _xmlhttp;
var index = 0;
var flag = false;
//-------------------------------------------
function GetCurrentItem(str) {
var temp = new String();
temp = "";
for (; index < str.length && str[index] != ','; index++) {
temp += str[index];
}
index++;
return temp;
}
var _xmlhttp;
var index = 0;
var flag = false;
//-------------------------------------------
function GetCurrentItem(str) {
var temp = new String();
temp = "";
for (; index < str.length && str[index] != ','; index++) {
temp += str[index];
}
index++;
return temp;
}
В другой функции заполняю список <select> (после того как ответ с сервера получен):
Код:
if (_xmlhttp.readyState == 4 && _xmlhttp.status == 200) {
var obj = document.getElementById(obj_id); //ссылка на объект <select>
while (index < _xmlhttp.responseText.length) {
obj.innerHTML += "<option value='" + GetCurrentItem(_xmlhttp.responseText) + "'>" + GetCurrentItem(_xmlhttp.responseText) + "</option>";
}
}
var obj = document.getElementById(obj_id); //ссылка на объект <select>
while (index < _xmlhttp.responseText.length) {
obj.innerHTML += "<option value='" + GetCurrentItem(_xmlhttp.responseText) + "'>" + GetCurrentItem(_xmlhttp.responseText) + "</option>";
}
}
в гугл хром, в мазилле все работает, в ИЕ получаю пустой список, значения полученные из функции определенны как undifiend. на скрине я вывела содержимое строк полученных с функции ГетКуррентАйтем и индекс : responcetext.length (внутри тела while) ... список пустой получаю, одни пустые строки.
[ATTACH=CONFIG]5060[/ATTACH]
Вопрос: что я сделала не так? и как сделать правильно )
Не возьмусь давать окончательный ответ в силу того, что пока сам набираюсь опыта, но:
1.
[QUOTE=javascript.ru]
b = new String(object) // синтаксис устарел и не используется
[/QUOTE]
(первоисточник - вот)
2. Никто ведь не гарантирует правильный порядок вызова GetCurrentItem(). Попробуйте указать явно:
1.
[QUOTE=javascript.ru]
b = new String(object) // синтаксис устарел и не используется
[/QUOTE]
(первоисточник - вот)
2. Никто ведь не гарантирует правильный порядок вызова GetCurrentItem(). Попробуйте указать явно:
Код:
var optionValue = '';
var optionText = '';
while (index < _xmlhttp.responseText.length) {
optionValue = GetCurrentItem(_xmlhttp.responseText);
optionText = GetCurrentItem(_xmlhttp.responseText);
obj.innerHTML += "<option value='" + optionValue + "'>" + optionText + "</option>";
}
var optionText = '';
while (index < _xmlhttp.responseText.length) {
optionValue = GetCurrentItem(_xmlhttp.responseText);
optionText = GetCurrentItem(_xmlhttp.responseText);
obj.innerHTML += "<option value='" + optionValue + "'>" + optionText + "</option>";
}
hp]
var optionValue = '';
var optionText = '';
while (index < _xmlhttp.responseText.length) {
optionValue = GetCurrentItem(_xmlhttp.responseText);
optionText = GetCurrentItem(_xmlhttp.responseText);
obj.innerHTML += "<option value='" + optionValue + "'>" + optionText + "</option>";
}
var optionValue = '';
var optionText = '';
while (index < _xmlhttp.responseText.length) {
optionValue = GetCurrentItem(_xmlhttp.responseText);
optionText = GetCurrentItem(_xmlhttp.responseText);
obj.innerHTML += "<option value='" + optionValue + "'>" + optionText + "</option>";
}
я так делала, все равно не работала, а то что нет гарантии в порядке вызова, не знала. я думала, что это как в Си работает, там нет сомнений в порядке вызова в таких случаях. да и потом проблема не в путанице возврата значений, а то что они не определяются. я вот думала может заполнение списка не корректно для ИЕ и вообще не знаю что думать )
Набросал тестовую страничку как раз для IE8. Действительно, получил описанную вами ситуацию. Проблема благополучно решилась заменой конструкций вида
на
Во избежание возможных недопониманий привожу полный код:
Код:
str[index]
на
Код:
str.charAt(index)
Во избежание возможных недопониманий привожу полный код:
Код:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var index = 0;
function GetCurrentItem(str) {
var temp = new String();
for (; index < str.length && str.charAt(index) != ','; index++) {
temp += str.charAt(index);
}
index++;
return temp;
}
function Test() {
var s = '0,Israel,1,England,2,Germany,3,Italy';
while (index < s.length)
alert(GetCurrentItem(s));
}
</script>
</head>
<body onload="java script:Test();">
</body>
</html>
<head>
<title>Test</title>
<script type="text/javascript">
var index = 0;
function GetCurrentItem(str) {
var temp = new String();
for (; index < str.length && str.charAt(index) != ','; index++) {
temp += str.charAt(index);
}
index++;
return temp;
}
function Test() {
var s = '0,Israel,1,England,2,Germany,3,Italy';
while (index < s.length)
alert(GetCurrentItem(s));
}
</script>
</head>
<body onload="java script:Test();">
</body>
</html>
Alexander92
спасибо большое! но у меня не пашет ((
проверю на другом компе, как доберусь.
еще интересный факт. судя по справочнику, ссылку на который вы мне привели, функция Split должна возвращать массив строк, но ничего она не возвращает, просто пробелы вставляет после запятых, вместо на отдельные строки разбить. что то у меня не лады с вебом )
спасибо большое! но у меня не пашет ((
Код:
function GetCurrentItem(str) {
var temp = new String();
temp = "";
for (; index < str.length && str.charAt(index) != ','; index++) {
temp += str.charAt(index);
}
index++;
return temp;
}
var temp = new String();
temp = "";
for (; index < str.length && str.charAt(index) != ','; index++) {
temp += str.charAt(index);
}
index++;
return temp;
}
проверю на другом компе, как доберусь.
еще интересный факт. судя по справочнику, ссылку на который вы мне привели, функция Split должна возвращать массив строк, но ничего она не возвращает, просто пробелы вставляет после запятых, вместо на отдельные строки разбить. что то у меня не лады с вебом )
спасибо за полный код, но алерт - это не показатель, хотя может я ошибаюсь. потом потестю, сейчас убегать надо. спасибо.
Чудеса какие-то, действительно. Единственное, что могу сходу сказать, - вот страничка с тем кодом, который я приводил, на моем сервере. У меня все прекрасно работает на IE8.
А что конкретно не работает? Мой вариант у вас все равно выдает undefined? Или проблемы с добавлением в select?
А что конкретно не работает? Мой вариант у вас все равно выдает undefined? Или проблемы с добавлением в select?
сейчас проверила, проблема именно с моим вариантом (текс с сервера возвращается корректный, проверяла).
с алертом работает и у меня, спасибо, а вот в while код с ума сходит. возможно только селектом, действительно убегаю. проверю, как доберусь обратно. попробую в span текст выводит, в цикле.
спасибо.
с алертом работает и у меня, спасибо, а вот в while код с ума сходит. возможно только селектом, действительно убегаю. проверю, как доберусь обратно. попробую в span текст выводит, в цикле.
спасибо.
Насколько мне известно, использовать innerHTML в динамических списках является некорректным.
Необходимо использовать new Option.
Вот вам пример. Формат передаваемых данных: text,value;
Для теста можете выполнить:
fill("text,1;cool,2;suck,3;bool,245;looser,344;mama,5234;" , "id_вашего_селекта");
Не забудьте, скрипт должен:
1. Или находиться после объекта select к которому вы будете обращаться
2. Или выполниться после того, как страница будет загружена и все элементы будут добавлены в DOM. (например body onload)
Необходимо использовать new Option.
Вот вам пример. Формат передаваемых данных: text,value;
Код:
<script type="text/javascript">
function fill(str,obj_id) {
var obj = document.getElementById(obj_id); // Получаем объект
obj.options.length = 0; // Очищаем список
var regexp = /(.+?),(.+?);/g // Задаем регулярное выражение с флагом g для последовательного перебора
var i=0; // первый элемент списка
while((myarray=regexp.exec(str)) != null) { // Будем заполнять массив, пока есть вхождения
obj.options = new Option (myarray[1], myarray[2]); //Заполняем массив
i++; // Номер следующего элемента
}
}
//..............................
if (_xmlhttp.readyState == 4 && _xmlhttp.status == 200) {
fill(_xmlhttp.responseText, obj_id);
}
</script>
function fill(str,obj_id) {
var obj = document.getElementById(obj_id); // Получаем объект
obj.options.length = 0; // Очищаем список
var regexp = /(.+?),(.+?);/g // Задаем регулярное выражение с флагом g для последовательного перебора
var i=0; // первый элемент списка
while((myarray=regexp.exec(str)) != null) { // Будем заполнять массив, пока есть вхождения
obj.options = new Option (myarray[1], myarray[2]); //Заполняем массив
i++; // Номер следующего элемента
}
}
//..............................
if (_xmlhttp.readyState == 4 && _xmlhttp.status == 200) {
fill(_xmlhttp.responseText, obj_id);
}
</script>
Для теста можете выполнить:
fill("text,1;cool,2;suck,3;bool,245;looser,344;mama,5234;" , "id_вашего_селекта");
Не забудьте, скрипт должен:
1. Или находиться после объекта select к которому вы будете обращаться
2. Или выполниться после того, как страница будет загружена и все элементы будут добавлены в DOM. (например body onload)
Подправил регулярку под требуемый формат входных данных:
Код:
var regexp = /([^,]+),([^,]+)/g;
var i = 0;
while((myarray = regexp.exec(str)) != null) {
obj.options = new Option (myarray[1], myarray[2]);
i++;
}
var i = 0;
while((myarray = regexp.exec(str)) != null) {
obj.options = new Option (myarray[1], myarray[2]);
i++;
}
Kesano, Alexander92
спасибо за помощь. на днях разберусь и опробую, надеюсь будет возможность отписаться, т.к. уезжаю на неделю. наличие инета не известно )
спасибо за помощь. на днях разберусь и опробую, надеюсь будет возможность отписаться, т.к. уезжаю на неделю. наличие инета не известно )