jQuery - オプションをOptionオブジェクトに追加

Question

私は2つの選択ボックスを持っています。最初の選択ボックスは2番目の選択ボックスを変更します。 2番目の変数は、小さな変数セットを持つことができます。

私が行ったことは、ページが読み込まれたときにオプションを変数として保存するときです。

var optionList = $('select[name="location"] option'); 

最初の選択ボックスが変更されたとき。私はその後、ノックアウトと箱2

case 'add': 
    $('select[name="location"] option').remove(); 
    $(optionList).each(function() { 
     $('select[name="location"]').append($(this)); 
    }); 
    $('select[name="location"] option:not(option[value="cart"])').remove(); 
break; 

このすべてが正常に動作を選択するために、新しいオプションを追加し、その後switchステートメントに最初の選択ボックスの値と一致する以下のような何かを。

ここで行う必要があるのは、optionListにオプションを追加することです。私は追加と後の両方を試みました。 Appendは最後のオプションの中に新しいオプションを追加します。 AfterはjQueryエラーを引き起こします。どのように私はこれを行う任意のアイデア？

var html = '<option value="'+v+'">'+l+'</label>'; 
$(optionList).append(html); // Fails 
$(optionList).after(html); // jQuery error line 3 

Answer 1

まず、あなたが終了labelタグで、optionタグを付加している、それは次のようになります。第二に

var html = '<option value="'+v+'">'+l+'</option>'; 

、あなたはそれがすべての既存のオプションの後に、あなたの新しいオプションを追加します持っているコードで（optionListは、すべての既存のoption要素の配列です）。

代わりに、あなただけのように、select要素に付加する必要があります

$('select[name="location"]').append(html); 

Answer 2

$は（ '[名= "場所"]オプションを選択します'）;その選択の一部であるオプションを選択しています。 $（optionList）.append（html）;を実行すると、その結果リストの各オプションに "html"が追加されます。

個人的に、私は通常のような何かをしたい：

 
var $mySelect = $('select[name="location"]'); 
var optionList = $mySelect.find('option'); 
... 
$mySelect.append(html); 

をしかし、あなたはまた、このような何かを行うことができます：

 
var optionList = $('select[name="location"] option'); 
... 
optionList.filter(':first').parent().append(html); 

第二の選択肢ががパフォーマンスが低いです。

optionList.push（html）は機能しませんでした。optionListは、document.forms内のselectのオプションリストではなく、jQueryでラップされたオプションの配列（それぞれjQueryラップされたオプション）です。
optionList.push（$（html））は、生のDOM要素 "html"をjQueryでラップしたので、別のjQueryラップされたオプションをoptionListに追加するだけでした。 optionList.add（$（html））を実行した場合、文字を保存することができます（もう少しjQueryishになります）。しかし、どちらか一方だけがoptionListコレクションに "html"要素を追加します。実際にはDOMに「html」を追加することはありません。

最後に、2つのサイドノート...まず、ループの中にあるように追加することは、本当に悪い考えです。あなたはDOMに当たっていて、ループのたびに再描画をトリガーします。あなたはオプションの配列を作成する方がはるかに優れています。次に、 のようなことをします。jQuery.fn.append.apply（$（ 'select [name = "location"]'）、objectArray）; ページ上で1回だけヒットし、再描画を1回だけトリガします。詳細はhttp://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctlyを参照してください。

第2に、$（optionList）は冗長であり、パフォーマンスが低下します。 optionListはすでにjQueryオブジェクトです。つまり、$（ 'select [name = "location"] option'）です。 $（optionList）はjQueryコンストラクタを呼び出し、optionListがすでにjQueryオブジェクトであることを認識し、内部的に$（optionList）の使用を実際にoptionListを使用してjQueryに変換します。