web-dev-qa-db-ja.com

<select>にJavascriptをすばやく入力する方法

フォームに2つの<select>ボックスがあります。最初の<select>ボックスで項目を選択すると、2番目の<select>に何が表示されるかが決まります（Ajax http_requestを使用）。

場合によっては、2番目の選択で500（推測）の大きなアイテムが存在する可能性があり、IEで更新するのに5〜10秒かかります。 Firefoxは完全に機能しているようです。

これを達成するためのより速い方法があるのだろうか。現在、サーバーは文字列を作成してクライアントに渡します。クライアントは分割され、オプション要素を作成して<select>に追加することにより、各項目をselectに追加します。

選択項目全体をサーバー上で文字列として作成し、それをフォームに追加しようとしましたが、何らかの理由でFirefoxでは機能しませんでした（何かが足りませんでしたか？）

ありがとう

javascriptajaxinternet-explorerperformancehtml-select
14
Steve

IEの場合でも、500要素はそれほど多くありません。あなたは遅れを引き起こすために何か他のことをしているに違いありません。

IE6、IE7、FF2、FF3で500以上のオプションを試してみましたが、すべてほぼ瞬時でした。私はこのコードを使用しました：

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))
}

データをフェッチし、ドロップダウンにデータを入力するコードのビットをプロファイリングすることをお勧めします。他の何かが時間を取っている可能性があります。たとえば、サーバーから返された文字列値を「分割」するコードがシャープであることを確認します（サーバーで独自のカスタム解析を行っているように聞こえます）。

19
Crescent Fresh

最初のコードは問題ありませんが、これは私にとってはうまく機能します：

var data = [
    { text: 'uno', value: '1' },
    {text: 'dos', value: '2' }
];

var select = document.getElementById('select-choice-1');
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, d.value))
}
4
serginhofogo

SelectElement.innerHTMLでのこれらすべての回答の問題は、SELECTではこのトリックを実行できないことです。解決策は、SELECT要素自体のPARENTでinnerHTMLを使用することです。したがって、ajax/jquery/whateverコードで、すべてのSELECT HTMLを含む文字列を作成し、ホルダー（divまたはspanなど）を取得して、innerHTMLを作成した文字列に設定します。

SELECT要素を破棄/再構築するときに他のhtml要素が犠牲になるのを防ぐために、SELECTをページから分離し、明示的な親要素（spanまたはdiv）を与える必要があります。

短い答え：

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

SelectElement.innerHTMLを使用して設定すると、最速になります...しかしIEでは失敗します。

最後に確認したところ、すべてのオプションを偽の<div>タグでラップするか、.outerHTML全体を設定すると、IEでこれを実行できます。 IEの選択リスト。

2
scunliffe

サーバー上にselect全体を作成し、ページに挿入します。このアプローチは、煩わしいブラウザの不一致を回避し、クライアント側のコードの複雑さを軽減します。

あなたはそれを試したと言いましたが、Firefoxでは失敗しました。それを機能させるために頑張ったり、その問題について助けを求める別の質問を投稿したり、Firefoxで機能しなかったものを私たちに見せるために質問を編集したりすることをお勧めします。

1
karim79

SELECTに追加する前に、まずdocument.createDocumentFragment()に追加することを忘れないでください。

1
Kernel James

これの最初のバージョンを使用すると機能しますが、2番目の選択の更新に非常に時間がかかる場合があります

 <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は2番目の選択データを投稿していないようです。私はこれで何かを逃したことがありますか。

 <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）
 {
 //更新データがいっぱいですselecthtml 
 var itemid = document.getElementById（ 'addselect '）; 
 itemid.innerHTML = updatedata; 
} 
 </ script>
0
Steve

CoffeeScriptを使用してもかまわない場合は、次のコードで選択リストに数行のJSONデータを入力します。

[〜＃〜] html [〜＃〜]

<select id="clients"></select>

CoffeeScript

fillList=($list, url)=>
    $.getJSON(url)
    .success((data)->
        $list
        .empty()
        .append("<option value=\"#{item.Id}\">#{item.Name}</option>" for item in data)
    )

$ -> 
    fillList($('#clients'), '/clients/all')

注：append内のループは、appendメソッドを1回呼び出す前にhtml文字列全体を生成します。これは素晴らしく効率的です。

JSONの例

[
  {"Id":"1","Name":"Client-1"},
  {"Id":"2","Name":"Client-2"}
]
0
biofractal

CrescentFreshとKemalFadillahの両方が使用しているので、私はその答えが好きです。

select.options.add(new Options(name, value))

データオブジェクトに関しては、次のように小さな調整をお勧めします。

var data = {
  'uno': 1,
  'dos': 2
};

var select = document.getElementById('select-choice-1');
select.options.length = 0; // clear out existing items
for (var i in data) {
      select.options.add(new Option(i, data[i]));
}
0
Stephen Quan

コードを確認すると非常に役立ちます。

<option>要素を作成する場合および反復ごとに追加する場合は、すべての<option>要素を一度に作成してから、それらすべてを一度に追加することを検討する必要があります。

したがって（擬似コードで）：

// 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)
0
Triptych