Браузер Нейтральный Путь, чтобы добавить опции для выбора элемента в JavaScript

Question

Я только что узнал что-то интересное. Метод add для объекта выбора javascript в IE 6 принимает только один параметр. Он выдает ошибку, когда вы передаете ему два параметра, которые я считаю стандарт , даже если задокументировано на сайте MSDN.

Мой вопрос такой. Какова ваша рекомендация для программного добавления элементов option в элемент select в javascript?

• Вызывать метод add по-разному в зависимости от значения пользовательского агента?
• Обернуть объект select в классе, который обеспечивает правильную сигнатуру метода?
• Использовать библиотеку javascript, которая делает это за вас (укажите, какая библиотека)?

Answer 1

Добавление нового типа Option работает как минимум IE6 и выше

function addOption(selectID, display, value)
{
  var obj = document.getElementById(selectID);
  obj.options[obj.options.length] = new Option(display, value);
}

Дополнительно успешно протестировано в Firefox 2, 3, Opera 8, 9.5 и Safari 4. IE4 не удалось: (

Answer 2

Вы можете использовать блок try-catch для этого:

              try
    {
        //Standards compliant
        list.add(optionTag, null);
    }
    catch (err)
    {
        //IE
        list.add(optionTag);
    }

Answer 3

Вам не следует использовать метод Select.add, так как он не работает в IE, и есть более эффективные способы динамического добавления параметров (см. http://msdn.microsoft.com/en-us/library/ms535921(VS.85).aspx)

У меня была такая же проблема, и я обнаружил, что лучший способ - использовать метод Node.insertBefore. Это дает преимущество работы во всех браузерах и упрощает сортировку элементов, потому что вам не нужно добавлять элемент как последний элемент списка выбора в IE. Например, добавление параметра из одного списка выбора в другой, чтобы параметры в целевом списке были отсортированы в алфавитном порядке, можно выполнить следующим образом:

/*
adds an option to select element, alphabetically sorted according to the lower case value of the display element (option.text)
*/

function insertOptionToList(optionToInsert, targetSelectElement){

    for (var i=0;i<targetSelectElement.options.length;i++){
        var tempOptionText = targetSelectElement.options[i].text;
        if(tempOptionText.length>0 && optionToInsert.text.toLowerCase()<tempOptionText.toLowerCase()){
            targetSelectElement.insertBefore(optionToInsert,targetSelectElement[i]);
            return true;
        }
    }
    targetSelectElement.options[targetSelectElement.options.length] = optionToInsert;
    return true;                        
}

Answer 4

Я бы предложил вместо этого использовать DOM-методы.

document.createElement('option')
selectEl.appendChild()

Никогда не было проблем с этим.

Answer 5

$("#selectID").addOption(value, text);

с использованием функции addOption из плагина jQuery selectboxes

Answer 6

Я провел некоторые исследования, используя все перестановки и комбинации для создания объекта опций, и я надеюсь, что это наилучший возможный способ, с помощью которого мы можем добавлять опции для выбора в браузере, нейтральным способом:

function populateSelectField()
{

    document.frmMain.fldSelect.options.length = 0;
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 1");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 2");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 3");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 4");
}

Поскольку доступ к объекту поля выбора осуществляется с помощью его родительского объекта, который в этом коде называется "frmMain" (форма), это не создает проблем для любого браузера для запуска кода.

Это поддерживается всеми браузерами, включая IE.

Answer 7

Это сработало для меня

$(selectID).append($('<option>'+display+'</option>').attr('value', value));

Answer 8

(редактировать: в IE это не работает, поэтому не рекомендуется.)

Я делаю это, изменяя innerHTML:

<select id="selectItem"></select>

var s=document.getElementById("selectItem");
s.innerHTML+="<option>apples</option>";
s.innerHTML+="<option>bananas</option>"; //(...etc)

Или поместите его в цикл, если вы используете массив для заполнения раскрывающегося списка.

Answer 9

Если вы хотите добавить опцию в start раскрывающегося списка, это должно сделать следующее изменение:

    try{
        list.add(optionTag, 0);
    } catch (err) {
        // Firefox is dumb for once: http://www.quirksmode.org/dom/w3c_html.html#selects
        list.add(optionTag, list.options[0]);
    }

Answer 10

Насколько я помню, IE4 принимает создание элемента option и добавляет его, но, возможно, я не помню его неправильно!