Добавить опции для выбора поля без закрытия Internet Explorer? - PullRequest
Новая
       15

Добавить опции для выбора поля без закрытия Internet Explorer?

4 голосов
/ 22 сентября 2008

Я пытаюсь создать веб-страницу с несколькими раскрывающимися списками выбора, которые асинхронно загружают свои параметры при первом открытии окна. Это работает очень хорошо в Firefox, но не в Internet Explorer.

Ниже приведен небольшой пример того, чего я пытаюсь достичь. По сути, есть поле выбора (с идентификатором «selectBox»), которое содержит только один параметр («Любой»). Затем есть обработчик onmousedown, который загружает другие опции при щелчке поля. 

<html>
 <head>
  <script type="text/javascript">
    function appendOption(select,option) {
      try {
        selectBox.add(option,null); // Standards compliant.
      } catch (e) {
        selectBox.add(option);      // IE only version.
      }
    }

    function loadOptions() {
      // Simulate an AJAX request that will call the
      // loadOptionsCallback function after 500ms.
      setTimeout(loadOptionsCallback,500);
    }

    function loadOptionsCallback() {
      var selectBox = document.getElementById('selectBox');
      var option = document.createElement('option');
      option.text = 'new option';
      appendOption(selectBox,option);
    }
  </script>
 </head>
 <body>
  <select id="selectBox" onmousedown="loadOptions();">
   <option>Any</option>
  </select>
 </body>
</html>

Желаемое поведение (которое делает Firefox):

  1. пользователь видит закрытое поле выбора, содержащее «Любой».
  2. пользователь нажимает на поле выбора.
  3. Откроется окно выбора, чтобы отобразить единственный вариант («Любой»).
  4. 500 мс позже (или после возврата вызова AJAX) раскрывающийся список расширяется и включает новые параметры (в этом примере они жестко запрограммированы как «новая опция»).

Так что именно это и делает Firefox, и это здорово. Однако в Internet Explorer, как только новая опция добавлена ​​в «4», браузер закрывает поле выбора. Поле выбора содержит правильные параметры, но поле закрыто, и пользователю требуется нажать кнопку, чтобы открыть его снова.

Итак, есть ли у кого-нибудь предложения о том, как я могу асинхронно загружать параметры элемента управления select без закрытия раскрывающегося списка IE?

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

Кроме того, если результаты загружаются синхронно, до того, как обработчик onmousedown блока выбора завершится, то IE покажет полный список, как и ожидалось - однако синхронная загрузка - это плохая идея, так как она будет полностью «заблокировать» браузер во время выполнения сетевых запросов.

Наконец, я также попытался использовать метод click () в IE, чтобы открыть окно выбора после добавления новых параметров, но это не приводит к повторному открытию окна выбора.

Любые идеи или предложения будут по достоинству оценены! :)

Спасибо!

Paul.

Ответы [ 3 ]

1 голос
/ 22 сентября 2008

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

Ваша идея звучит с точки зрения программирования, но вы получите этот разрыв между нажатием на кнопку выбора и заполнением всеми опциями, которые с точки зрения пользователя выглядят неаккуратно.

1 голос
/ 13 июля 2010

Я нашел решение этой проблемы, похоже, проблема заключается в реализации IE onclick, hover, mouseover и т. Д. После добавления элементов в раскрывающийся список раскрывающийся список закрывается. Если вы вместо предоставления метода в атрибуте select, дайте jquery добавить функцию во время выполнения, она работает. 

$(function() {
    jQuery(".selectBox").live("focus", function() {
       loadOptions();
     });
});

Вся страница: 

<html>
<head>
    <script src="jquery-latest.js" type="text/javascript"/>
</head>
<body>
    <select id="selectBox" onmousedown="loadOptions();">
        <option>Any</option>
    </select>
    <script type="text/javascript">
        $(function() {
            jQuery(".selectBox").live("focus", function() {
                loadOptions();
            });
        });
        function appendOption(select, option) {
            try {
                selectBox.add(option, null); // Standards compliant.
            } catch (e) {
                selectBox.add(option);      // IE only version.
            }
        }

        function loadOptions() {
            // Simulate an AJAX request that will call the
            // loadOptionsCallback function after 500ms.
            setTimeout(loadOptionsCallback, 500);
        }

        function loadOptionsCallback() {
            var selectBox = document.getElementById('selectBox');
            var option = document.createElement('option');
            option.text = 'new option';
            appendOption(selectBox, option);
        }
    </script>
</body>

1 голос
/ 22 сентября 2008

Рассматривали ли вы вызов метода loadOptions в событии onblur одного из других взаимосвязанных полей в форме? Это приведет к загрузке списка в раскрывающемся списке до щелчка, но поведение все равно должно быть схожим.

Я думаю, вам придется изучить несколько другие варианты, чтобы получить то, что вы хотите, так как вы, вероятно, застряли в Internet Explorer, закрывая этот выпадающий список, если вы используете события onmousedown или onclick. Другим недостатком использования этих событий является то, что если пользователь использует клавиатуру для выбора полей, ваш метод может никогда не быть вызван.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...