Более быстрый способ заполнить <выбирает> с JavaScript

Question

Более быстрый способ заполнить <выбирает> с JavaScript

Поскольку вы используете Thymeleaf с Spring Boot, выражениями являются SpEL (язык выражений Spring), а в документации говорится:

Вы Можно вызывать конструкторы с помощью оператора new. Вы должны использовать полное имя класса для всех, кроме примитивных типов (int, float и т. Д.) И String.
blockquote>
Итак, вам нужно использовать new java.util.Locale('es') вместо просто new Locale('es')

14

html-select performance internet-explorer ajax javascript

задан 30 March 2009 в 20:04

6 ответов

Другие вопросы по тегам:

html-select performance internet-explorer ajax javascript

Похожие вопросы:

score 1 · Answer 1

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

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

score 2 · Answer 2

Установка его с помощью SelectElement.innerHTML была бы самой быстрой..., но это ПЕРЕСТАЛО РАБОТАТЬ в IE.

В последний раз я проверил, можно сделать это в IE, если Вы переносите все опции в поддельное <отделение> тег или устанавливаете весь .outerHTML списка выборки в IE.

score 19 · Answer 3

500 элементов не много, даже для IE. Необходимо делать что-то еще для порождения задержки.

Я просто попробовал 500 + опции в IE6, IE7, FF2 и FF3, и все были почти мгновенны. Я использовал этот код:

var data = [
    { text: 'foo', value: 'bar' },
    // ...
    { text: 'foo', value: 'bar' }
];

var select = document.getElementsByTagName('select')[0];
select.options.length = 0; // clear out existing items
for(var i=0; i < data.length; i++) {
    var d = data[i];
    select.options.add(new Option(d.text, i))
}

Я предложил бы представить бит кода, который выбирает данные и заполняет выпадающее. Что-то еще могло бы занимать время. Например, проверьте, что код, который "разбивает" строковое значение, возвращенное с сервера, резок (кажется, что Вы делаете свой собственный парсинг там).

score 0 · Answer 4

Это помогло бы значительно видеть Ваш код.

ЕСЛИ Вы создаете <option> элемент и добавление его каждое повторение, необходимо рассмотреть создание весь <option> элементы сразу и затем добавление их внезапно.

Таким образом (в psuedocode):

// Don't do this:
for choice in choices:
    option = new Options(choice)
    select.append(option)


// Do this instead
var options = array()

for choice in choices:
   options.append( new Options(choice) )

for option in options:
   select.append(option)

// Or you might try building the select element off-screen and then appending to the DOM
var options = array()
var select = new SelectElement()

for choice in choices:
   select.append( new Options(choice) )

dom_element.append(select)

score 0 · Answer 5

Когда я использую первую версию этого, она работает, но может быть очень медленной в обновлении второго выбора

<html>
<form id='myform' method='post' action='$_SERVER[PHP_SELF]'>
<table>
<tr><td><select onselect='CALL_AJAX_AND_UPDATE();'></select></td></tr>
<tr><td><select id='selectid'></select></td></tr>
</table>
</form>
</html>

<script type=\"text/javascript\">
function UPDATE( updatedata )
{                   
    var itemid = document.getElementById('selectid');               

    var data = updatedata.split( '|' );
    var len = data.length;                                                          

    for( i=0; i < len; i ++ )
    {
        var opt = document.createElement('option');
        opt.text = data[i];

        try
        {
            itemid.add( opt, null );                        
        }
        catch(ex)
        {
            itemid.add( opt );      
        }       
    }                                           
}
</script>

Эта версия работы в IE, но Firefox, кажется, не отправляет вторые данные выборов. Скучайте по мне что-то с этим.

<html>
<form id='myform' method='post' action='$_SERVER[PHP_SELF]'>
<table>
<tr><td><select onselect='CALL_AJAX_AND_UPDATE();'></select></td></tr>
<tr><td><div id='addselect'></div></td></tr>
</table>
</form>
</html>

<script type=\"text/javascript\">
function UPDATE( updatedata )
{               
    // update data is full select html  
    var itemid = document.getElementById('addselect');              
    itemid.innerHTML = updatedata;                                                          
}
</script>

score 2 · Answer 6

Проблема со всеми этими ответами с SelectElement.innerHTML заключается в том, что вы не можете проделать этот трюк с SELECT. Решение состоит в том, чтобы использовать innerHTML для PARENT самого элемента SELECT. Итак, в вашем коде ajax / jquery / любой создайте строку, содержащую ВСЕ ИЗ SELECT HTML, а затем получите держатель (div или span или что-то еще) и установите innerHTML в строку, которую вы создали.

Вам нужно будет изолировать SELECT от страницы и дать ему явный родительский элемент (span или div), чтобы другие html-элементы не пострадали при уничтожении / восстановлении элемента SELECT.

Краткий ответ:

parentselectelement.removeChild(selectelement);
parentselectelement.innerHTML = "<select ...><options...></select>";

]