-1

選択に基づいて自動入力される多数の入力メニューを作成するための最良の方法を見つけようとしています。私が抱えている問題は、かなりの数のオプションがあることです。4つのドロップダウンがあります。各ドロップダウンには 2 つのオプションがあります。

次の例を見ていました。この方法は機能しますが、コードの量は膨大になります >> http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

これを達成するための最良の方法を知っている人はいますか??

ありがとう、

4

1 に答える 1

-1

これは、いくつかの一般的なヘルパー関数を使用して簡単に実行できます。

たとえば、値ごとに生の HTML を手動で提供する代わりに、<select>渡された単一の値に従って要素をクリアおよび設定する関数を作成できます。

<select>準備として、 first の値を second のリストへのインデックスとして含むオブジェクトを作成する必要があります<select>。このようなもの -

var beverages = {
 'wine' : ['Red','White'],
 'beer' : ['dark','pale'],
 'juice': ['mango','grapefruit']
};

これでbeverages['beer'][0]、冷たいビールのボトルが手に入ることがわかりました。

ここから、HTML 操作に役立つ、より一般的な関数を作成できます...

function populateSelect(category){
  // remove all existing options.
  $("#secondSelection").find('option').remove(); 
  $.each(beverages[category],function(index,elem){
    // for each item in beverages[category],
    // we add an option to the <select>.
     $("#secondSelection").append('<option>'+elem+'</option>');
  });
}

この関数を次のように呼び出します-

populateSelect($("#firstSelection").val());

あなたが持っていなければならないマークアップは、このようなものになるでしょう -

<select id="firstSelection">
  <option value='beer'>Beer</option>
  <option value='wine'>Wine</option>
  <option value='juice'>Juice</option>
</select>
<select id="secondSelection">
  <option>Choose a Category</option>
</select>

あなたが説明したようなより複雑な構造の場合、元のオブジェクトにさらにオプションをネストすることができ、それは配列です...

于 2012-05-13T18:41:12.040 に答える