AJAXコールの後に、選択ドロップダウンメニューでデフォルト値を設定する方法

Question

ドロップダウンメニューからパーツ選択に基づいてテーブル行を生成するプログラムがあります。作成された各行には、数量のドロップダウンを含む<td>要素があります。私の問題は、新しい部品を選択して新しい行を作成すると、すべての数量ドロップダウンがデフォルト値の1にリセットされるということです。「selected = true;」で修正しようとしました。しかし、それは動作していないようです。基本的には、ユーザーが新しい行を追加したときに最後に設定された選択値のままになるように、各数量ドロップダウンの選択値を設定する必要があります。私は各新しい行のSQLテーブルからデータを生成するためにajax呼び出しを使用しています。

ここでは、選択ドロップダウンから呼び出される関数です。私は、不要なコードの多くを省略しました：ここ

function update(){ 
    var selectLists = document.getElementsByName("qty_dropdown"); 
    for(var i = 0; i < selectLists.length; i++){ 
     var firstSelectList = selectLists[i].value;  
    } 
} 

は私のドロップダウンです：

<td> 
    <select name = "qty_dropdown" onChange = "update()"> 
     <option value = '1'> 1 </option> 
     <option id = '2'value = '2'> 2 </option> 
     <option value = '3'> 3</option> 
     <option value = '4'> 4 </option> 
     <option value = '5'> 5 </option> 
     <option value = '6'> 6 </option> 
     <option value = '7'> 7 </option> 
     <option value = '8'> 8 </option> 
     <option value = '9'> 9 </option> 
     <option value ='10'> 10</option> 
    </td> 
</select> 

Answer 1

あなたはupdate()内で実行されている機能（私は（）を追加し、それを改称）で実行する必要があります新しい行の追加。

function add(){ 
    var selectLists = document.getElementsByName("qty_dropdown"); 
    var firstSelectList=[]; 
    for(var i = 0; i < selectLists.length; i++){ 
     firstSelectList.push(selectLists[i].value); 
    } 
    document.getElementById("inject").innerHTML+="<select name = 'qty_dropdown' onChange = 'update()'>   <option value = '1'> 1 </option>   <option id = '2'value = '2'> 2 </option>   <option value = '3'> 3</option>   <option value = '4'> 4 </option>   <option value = '5'> 5 </option>   <option value = '6'> 6 </option>   <option value = '7'> 7 </option>   <option value = '8'> 8 </option>   <option value = '9'> 9 </option>   <option value ='10'> 10</option>   </select>  "; 
    for(var i = 0; i < selectLists.length-1;i++){ 
    selectLists[i].value=firstSelectList[i]; 
    } 
} 

この関数add（）は、以前のドロップダウンをリセットせずに新しい行を追加します。

デモ：私は何https://jsfiddle.net/0wur28ot/

は、新しい行を追加する前に、配列の値を保存しているし、私はそれに応じて行加算後のドロップダウンに値を割り当てられました。

Answer 2

あなたがこれを行う方法の1つです。変数には最近選択されたドロップダウン値が記録され、DOMに新しいドロップダウンを追加するとその値が初期値として使用されます。

var lastUpdatedDropdownValue = ""; 
 

 
function update(event) { 
 
    lastUpdatedDropdownValue = event.target.value; 
 
} 
 

 
function addNewDropdown() { 
 
    var dropdown = document.querySelector("[name=qty_dropdown]"); 
 
    var newDropdown = dropdown.cloneNode(true); // make sure no duplicate IDs. If your elements that are being cloned have IDs, remove them before re-inserting into the DOM 
 
    document.getElementById("dropdownContainer").append(newDropdown); 
 
    var selectedOption = newDropdown.querySelector("[value='" + lastUpdatedDropdownValue + "']"); 
 
    selectedOption.selected = true; 
 
}

<button onclick="addNewDropdown()">Add New Dropdown</button> 
 
<div id="dropdownContainer"> 
 
    <select name="qty_dropdown" onChange="update(event)"> 
 
    <option value='1'>1</option> 
 
    <option value='2'>2</option> 
 
    <option value='3'>3</option> 
 
    <option value='4'>4</option> 
 
    <option value='5'>5</option> 
 
    <option value='6'>6</option> 
 
    <option value='7'>7</option> 
 
    <option value='8'>8</option> 
 
    <option value='9'>9</option> 
 
    <option value='10'>10</option> 
 
    </select> 
 
</div>