如何在AJAX调用后使用javascript设置选择下拉列表的默认值

Question

I have a program that generates a table rows based on part selections from a dropdown menu. On each row that is created, I have a <td> element that contains a dropdown for quantity. My problem is that when a new part is selected thus creating a new row, all my quantity dropdowns reset back to the default value of 1. I tried fixing it with "selected = true;" but that doesn't seem to work. Basically, I need to set the selected value of each quantity dropdown to stay as whatever selected value it was last set at when the user adds a new row. I'm using an ajax call to generate the data from a SQL table on each new row.

Here is the function which is called from the select dropdown. I've omitted a lot of unnecessary code:

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

Here is my dropdown:

<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

The function you are performing inside update() (i renamed it to add() ) should be performed on the addition of new row.

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];
    }
}

this function add() will add a new row without resetting previous dropdown.

Demo : https://jsfiddle.net/0wur28ot/

What i did is save the value in array before adding new row and then i assigned values to the dropdown accordingly after row addition.

Answer 2

Here is one way you can do it. You can keep a variable around that keeps track of the most recently selected dropdown value, and when you add a new dropdown to the DOM, it will use that value as its initial value.

 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>