ボタンのクリック時にドロップダウンフィールドを動的に設定する方法

Question

配列の長さに基づいて動的に作成されるドロップダウンを設定する方法については、いくつかの助けが必要です。長さが4の場合、作成された4つのドロップダウンオプションすべてに値を設定する必要があります。

これは

<div class="col-md-2"> 
     <button type="button" class="addBtn"> 
    </div> 
<div class="form-control" id="bookTemplate"> 
     <div class="col-md-2"> 
      <select class="myPopulatedValueElements"> 
       <option value="Volvo">Volvo</option> 
       <option value="Merc">Merc</option> 
      </select> 
     </div> 
    </div> 

マイJavascriptが何が起こることは、それが配列の長さに基づいて、新たなドロップダウンフィールドを追加しますが、それはそれぞれの追加に移入しないということである。この

var myCars = [ 
    "Jaguar", 
    "Limo", 
    "BMW", 
    "Ford Mustang", 
    "Audi" 
    ]; 

    for (var i = 0; <myCars.length; i++) { 
     $(".addBtn").click() 
    } 
    $('.myPopulatedValueElements').each(function(index){ 
     var carCounter = 0; 
     var optionCounter = 0; 
     $(this).find('option').each(function(){ 
      if($(this)[optionCounter] == myCars[carCounter]){ 
       $(this)[optionCounter].attr('selected', 'selected') 
       carCounter ++ 
      }else{ 
       optionCounter++ 
      } 

     }); 
    }); 

のように見える私のhtmlコードでありますフィールドを配列要素で置き換えます。私が間違ってやっていることに関する助けてください？

Answer 1

のは、無効な構文の二つの点から始めましょう：

• あなたがテキストを逃すと、あなたのbutton
のタグを閉じているあなたの forループ
• で<前iを逃しています

<select>ドロップダウンに<option>要素がmyCarsの配列で構成されていると仮定して、あなたがする必要があります：

• 既存の<option>要素を削除します。あなたは、動的に車を追加しているので、すでにそれぞれの車についてmyCars配列ではなく、HTML <select>
• 比べていくつかの
• ループを持ってしても意味がありません、<option>要素を構築し、value属性を追加し、text()車の配列のインデックスに関連付けられている
• 最後に、すべてを関数に移動し、onclickイベントハンドラをボタンに接続して関数を起動する必要があります。

これは、次のすべてで見ることができます。

var myCars = [ 
 
    "Jaguar", 
 
    "Limo", 
 
    "BMW", 
 
    "Ford Mustang", 
 
    "Audi" 
 
]; 
 

 
function addCars() { 
 
    $(".myPopulatedValueElements").html(''); 
 
    //^Optionally reset the `<select>` so that you don't get duplicates 
 
    for (var i = 0; i < myCars.length; i++) { 
 
    var $div = $("<option>", { 
 
     value: myCars[i], 
 
    }).text(myCars[i]); 
 
    $(".myPopulatedValueElements").append($div); 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="col-md-2"> 
 
    <button type="button" class="addBtn" onclick="addCars()">Button</button> 
 
</div> 
 
<div class="form-control" id="bookTemplate"> 
 
    <div class="col-md-2"> 
 
    <select class="myPopulatedValueElements"> 
 
    </select> 
 
    </div> 
 
</div>

うまくいけば、これはあなたが探しているものです！