<select> показывает только первый символ выбранной опции

Question

У меня есть стандартное поле выбора, которое я заполняю, используя jquery, добавляя опции, но по какой-то причине IE9 показывает только первый символ выбранной опции.Излишне говорить, что он отлично работает в FireFox и Chrome, но я должен поддерживать IE9.Я пробовал режимы совместимости IE9, но это не имело никакого значения, равно как и стилизация выбора или опции.

Кто-нибудь видел эту проблему раньше.Что вызвало это?Как вы это исправили?

Упрощенный пример кода:

<select id="selectCCY" ValueColumn="ccyID" DisplayColumn="ccySymbol" ></select>



$.each(res.result, function (key, value) {  
    $('#selectCCY').append('<option value="' + value[$('#selectCCY').attr('ValueColumn')]+ '">' + value[$('#selectCCY').attr('DisplayColumn')] + '</option>');
});

res.result представляет собой простой массив json, подобный этому:

[{"ccyID":1,"ccySymbol":"GBP"},{"ccyID":2,"ccySymbol":"AUD"},{"ccyID":3,"ccySymbol":"USD"}]

О, БУЖЕР !!!в моем упрощенном примере это работает нормально, поэтому проблема в другом.Сожалею.Оригинальный код слишком длинный и сложный для вставки, но он сообщит вам, когда я найду ответ.

через некоторое время ....

Хорошо, я решил проблемувызов ajax внутри цикла $ (селектор) .each ().Цикл проходит через все поля выбора и асинхронно заполняет параметры.Если я сделаю это синхронным вызовом, поля выбора будут иметь правильную ширину и будут отображаться правильно, но если это асинхронный вызов, поля выбора показывают только первый символ, как на рисунке.все еще работаю над этим, снова свяжусь с вами.

Я все еще хочу знать, что может вызвать некорректное отображение окна выбора.Я могу сделать обходные пути и заставить его показывать правильно, но это не отвечает на вопрос.Это просто выбор с опциями, он всегда должен работать, верно?

после выходных, игнорируя проблему ....

Правильно, я нашел обходной путь.Перед выполнением вызова ajax для заполнения поля выбора я сначала устанавливаю для свойства css display значение 'none', затем заполняю его и, наконец, когда вызов ajax и заполнение завершены, я просто удаляю свойство css display 'none'.

Так что я до сих пор не знаю, почему я не нравлюсь IE, но у нас, по крайней мере, есть решение.

Answer 1

В моем случае у меня не было ловушки события, чтобы скрыть выборку до того, как сработает запрос ajax, поэтому мне пришлось принудительно перерисовать элемент select после факта.Повторное применение существующей ширины, кажется, работает:

$("select").width($("select").width());

Answer 2

Это проблема только IE. Сначала установите для свойства css display в поле выбора значение none, затем заполните его с помощью вызова ajax, наконец, когда вызов ajax завершен и поле выбора заполнено, удалите свойство css display 'none' в поле выбора

Answer 3

Основываясь на ответе Джима, я передаю раскрывающийся список в этот метод:

// force redraw to get around bug in IE.
// NOTE that this removes width from the style attribute.
function forceRedraw(jqueryObject) {
    jqueryObject.css('width', 0);
    jqueryObject.css('width', '');  // remove from style tag
}

Это работает вокруг ошибки в IE и оставляет ширину элемента там, где он был до того, как методназывается , пока ширина указана в CSS, а не в атрибуте style.

Answer 4

Я использую angularjs, а также сталкиваюсь с этой проблемой в ie8 / ie9 Этот подход / обходной путь работал для меня: например С HTML выглядит так:

<select ng-show="data.showSelect" ng-cloak ng-model="data.model" ng-options="l.id as l.name for l in data.items></select>

Этот код запускается после загрузки данных для раскрывающегося списка, и это устраняет проблему

$timeout(function(){$scope.data.showSelect = true;},100);

Полагаю, вы могли бы также включить это в директиву, если у вас на сайте есть несколько областей, требующих обходного решения.

Answer 5

Добавление пары строк в следующих местах (помеченных жирным шрифтом как **) в функции рендеринга selectDirective в angular.js прекрасно работало для меня.Я смотрю, есть ли какое-либо другое возможное решение, кроме исправления angularJS или forEach, приведенного ниже?

if (existingOption.label !== option.label) {
  lastElement.text(existingOption.label = option.label);
  **lastElement.attr('label', existingOption.label);**
}

и

  (element = optionTemplate.clone())
      .val(option.id)
      .attr('selected', option.selected)
      .text(option.label);
  **element.attr('label', option.label);**

Проблема заключалась в том, что атрибут label в HTMLOptionElement неТо же самое, что и текстовый атрибут, если в IE пустая метка.

Это можно проверить, добавив следующий код после загрузки экрана и просмотрев веб-консоль FF и IE, чтобы увидеть разницу.Если вы раскомментируете последнюю строку, в которой метка установлена ​​как текст, она работает нормально.Альтернативно исправьте angular.js, как указано выше.

// This is an IE fix for not updating the section of dropdowns which has ng-options with filters
angular.forEach($("select"), function (currSelect) {
    console.log("1.text ", currSelect.options[currSelect.selectedIndex].text);
    console.log("1.label ", currSelect.options[currSelect.selectedIndex].label);
    //console.log("1.innerHTML ", currSelect.options[currSelect.selectedIndex].innerHTML);
    //console.log("1.textContent ", currSelect.options[currSelect.selectedIndex].textContent);
    //console.log("1.cN.data ", currSelect.options[currSelect.selectedIndex].childNodes[0].data);
    //console.log("1.cN.nodeValue ", currSelect.options[currSelect.selectedIndex].childNodes[0].nodeValue);
    //console.log("1.cN.textContent ", currSelect.options[currSelect.selectedIndex].childNodes[0].textContent);
    //console.log("1.cN.wholeText ", currSelect.options[currSelect.selectedIndex].childNodes[0].wholeText);
    //console.log("1. ", currSelect.options[currSelect.selectedIndex], "\n");

    //currSelect.options[currSelect.selectedIndex].label = "xyz";
    //currSelect.options[currSelect.selectedIndex].label = currSelect.options[currSelect.selectedIndex].text;
});

Answer 6

У меня были обратные вызовы в моем случае, поэтому установка отображения на ноль при заполнении не была для меня вариантом, однако, я смог уточнить ответ @Daniel Brinks, чтобы решить мою проблему. добавлено, и отображение меняется с нуля на ничего, все будущие добавленные элементы будут в порядке .. с помощью jquery и в виджете ... Так что, если вы пытаетесь исправить свой виджет для работы в IE, это может быть полезно для вас ..

в функции _create виджета:

this.availableFields = $("<select multiple='multiple' name='AvailableFields'></select>")
                                .addClass("ui-fieldselector-available-select")
                                .css("display", "none")
                                .appendTo( this.element );

в функции _init виджета:

buildAvailableItem - добавляет к выбору

затем добавьте в массив, который отслеживает состояние виджетов

var $this = this;
                //IE HACK Part 1--
                $this.buildAvailableItem("Loading...", "Loading..." );
                $this.availableList.push("Loading...");
                //----------------
    //do stuff, here I initialize some functionality, like drag and drop, add click events, etc.
                //IE HACK Part 2--
                $($this.availableFields).css("display", "");
                $this.removeAvailableOption("Loading...");
                //----------------
    // AJAX adding

Обычно я использую функцию addAvailableItem, которая обрабатывает создание элемента и добавление его в список, но также вызывает событие, и я не хочу, чтобы событие запускалось для элемента «Загрузка ...».

Если по какой-то причине кто-то использует очень медленный браузер, он увидит «Загрузка ...», прежде чем он будет удален и добавлены элементы ajax.

Если кому-то нужна более дружественная версия для копирования и вставки, дайте мне знать

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

buildAvailableItem: function (display, value)
        {
            $("<option>" + display + "</option>").val(value).appendTo(this.availableFields);
        },

Answer 7

Я только что исправил ту же проблему, изменив способ инициализации элемента select (динамически создаваемого в виджете jQuery).

Пример A

Это не работает:

var select = $('<select size=7>') // IE9 'first character' bug

Это делает:

var select = $('<select>').attr('size', 7) // Yay

Пример B

Аналогично, следующее не работает:

self.element.append('<select name="mySelect">'); // IE9 'first character' bug

Принимая во внимание, что это будет:

var mySelect = $('<select>').attr('name', 'mySelect');
self.element.append(mySelect);

Заключение

Я бы хотел объяснить это, но боюсь, что не смогу. В любом случае, это может спасти людей от ненужного добавления нескольких хаков CSS в их код.