Google Chrome - JQuery Добавить опцию в выпадающий - PullRequest
Новая
       11

Google Chrome - JQuery Добавить опцию в выпадающий

2 голосов
/ 03 марта 2011

Google Chrome 9.0.597.107 (официальная сборка 75357) WebKit 534.13 V8 2.5.9.15 Пользовательский агент Mozilla / 5.0 (Windows; U; Windows NT 6.1; ru-ru) AppleWebKit / 534.13 (KHTML, как Gecko) Chrome / 9.0.597.107 Safari / 534.13 JQuery: 1.5.0

В основном моя проблема заключается в следующем. У меня проблема с динамическим обновлением выпадающего списка (выбор HTML) в Google Chrome. HTML-код относительно прост, и это урезанная строка используемого Jquery: 

($("<option />").val("test1").text("test2")).appendTo($("select[id*='SearchInput_Origin']"));

или 

$("select[id*='SearchInput_Origin']").append($("<option />").val("test1").text("test2"));

** это в настоящее время в $ (документ) .ready

По сути, они просто добавляют опцию в выпадающий список ... достаточно прямо. Прекрасно работает в Firefox и IE, однако в Google Chrome раскрывающийся список не отображает эту опцию как включенную, пока я не буду взаимодействовать со страницей, как, будь то фокусировка на чем-то или прокрутка и т. Д. ... происходит на нескольких компьютерах ... может не вижу причины для этого.

Я поместил предупреждение в функции, которые заполняют выпадающие списки, и код выполняется, но Chrome не обновляется ... очень странно

Кто-нибудь сталкивался с этим раньше? Есть идеи, что может быть причиной этого?

Заранее спасибо, enigmab17

[править # 1] Дополнительная информация Я расследовал это, не могу понять это вообще. Даже если я запускаю события на странице, она все равно ничего не делает, пока я физически не щелкну или не переместлю что-нибудь.

Разделили весь код из решения на html-страницу самостоятельно, и chrome работает нормально, поэтому должен иметь какое-то отношение к визуализации страницы. По сути, страница отображается через AJAX, есть несколько настроек, которые загружаются на главную страницу через ajax

[править # 2] Очень очень странно По умолчанию список выбора выглядит так: 

<select id="Select1" name="select1">
    <option value="-1">Default...</option>
</select>

И это делает, как указано выше. Код для удаления всех опций и заполнения его другими находится в doc.load. Если я проверяю инспектор элементов в Chrome, он показывает, что параметры были обновлены, но Chrome не отображает эти изменения на экране.

Что еще более странно, есть стандартная гиперссылка под выпадающим списком, и если я наведу на нее курсор, обновленные параметры будут отображаться в Chrome!?

Ответы [ 2 ]

0 голосов
/ 03 марта 2011

Обнаружена проблема.

В основном раскрывающиеся списки / параметры были частью более крупной формы, которая заполняется с помощью преобразования XSLT.На странице выше было размещено 2 переключателя ввода с помощью шаблона таблицы стилей XSLT, поэтому шаблон генерировал входные данные, и, по-видимому, Google Chrome по каким-то странным причинам не нравится.Как только я преобразовал его в несколько грязный вид тега выбора вместо шаблона, он работал нормально.Самая странная проблема в истории!: D

@ Arun P Johny Спасибо за помощь:)

0 голосов
/ 03 марта 2011

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

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
    </head>
    <body>
        <select></select>
    </body>
    <script>
        $(document).ready(function(){
            $("<option />").val("test1").text("test2").appendTo($("select"));
        });
    </script>
</html>

Можете ли вы воссоздать проблему, используя этот код?

Вы можете найти jsFiddle здесь .

ОБНОВЛЕНИЕ:

Попробуйте этот образец

main.html 

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.js"></script>
    </head>
    <body>
        <span class="button">Click to laod</span>
        <div class="container"></div>
    </body>
    <script>
        $(document).ready(function(){
            $("span.button").button().click(function(){
                $("div.container").load("ajax.html")
            });
        });
    </script>
</html>

ajax.html 

<select></select>
<script>
    $(document).ready(function(){
        $("<option />").val("test1").text("test2").appendTo($("select"));
    });
</script>

Это имитирует ваш случай?

...