<select> показывает только первый char выбранного параметра

У меня есть стандартный блок выбора, который я заполняю с помощью 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 внутри цикла $(selector).each(). Цикл проходит через все поля выбора и асинхронно заполняет параметры. Если я сделаю это синхронным вызовом, поля выбора имеют правильную ширину и будут отображаться правильно, но если его асинхронный вызов в блоках выбора показывает только первый char, как на изображении. все еще работая над этим, снова вернется к вам.

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

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

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

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

Ответ 1

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

Ответ 2

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

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

Ответ 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.

Ответ 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);

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

Ответ 5

У меня были обратные вызовы в моем случае, поэтому установка отображения на none при заполнении не была для меня вариантом, однако я смог подробно рассказать о ответе @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);
        },

Ответ 6

Добавив пару строк, следующие места (выделенные жирным шрифтом как **) в функции рендеринга selectDirective в angular.js отлично работали для меня. Я смотрю, есть ли какое-либо другое возможное решение, кроме исправления угловых значений JS или 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);**

Проблема заключалась в атрибуте метки 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;
});

Ответ 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-хаков в свой код без необходимости.