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

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