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

如何在AJAX调用后使用javascript设置select下拉列表的默认值,javascript,ajax,Javascript,Ajax,我有一个程序,根据下拉菜单中的零件选择生成表格行。在创建的每一行上,我都有一个元素,其中包含数量下拉列表。我的问题是,当选择一个新零件从而创建一个新行时,所有“我的数量”下拉列表将重置回默认值1。我试着用“selected=true”来修复它,但这似乎不起作用。基本上,我需要将每个数量下拉列表的选定值设置为用户添加新行时上次设置的选定值。我使用ajax调用从每一新行的SQL表生成数据 下面是从select下拉列表中调用的函数。我省略了很多不必要的代码: function update(){

我有一个程序,根据下拉菜单中的零件选择生成表格行。在创建的每一行上,我都有一个
元素,其中包含数量下拉列表。我的问题是,当选择一个新零件从而创建一个新行时,所有“我的数量”下拉列表将重置回默认值1。我试着用“selected=true”来修复它,但这似乎不起作用。基本上,我需要将每个数量下拉列表的选定值设置为用户添加新行时上次设置的选定值。我使用ajax调用从每一新行的SQL表生成数据

下面是从select下拉列表中调用的函数。我省略了很多不必要的代码:

function update(){
    var selectLists = document.getElementsByName("qty_dropdown");
    for(var i = 0; i < selectLists.length; i++){
        var firstSelectList = selectLists[i].value;    
    }
}
函数更新(){
var selectLists=document.getElementsByName(“数量下拉列表”);
对于(变量i=0;i
这是我的下拉列表:

<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> 

1.
2.
3.
4.
5.
6.
7.
8.
9
10

您在
update()中执行的函数(我将其重命名为add())应该在添加新行时执行

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];
    }
}
函数添加(){
var selectLists=document.getElementsByName(“数量下拉列表”);
var firstSelectList=[];
对于(变量i=0;i
此函数add()将添加新行,而不重置以前的下拉列表

演示:


我所做的是在添加新行之前将值保存在数组中,然后在添加行之后将值相应地分配给下拉列表。

update()
(我将其重命名为add())中执行的函数应该在添加新行时执行

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];
    }
}
函数添加(){
var selectLists=document.getElementsByName(“数量下拉列表”);
var firstSelectList=[];
对于(变量i=0;i
此函数add()将添加新行,而不重置以前的下拉列表

演示:


我所做的是在添加新行之前将值保存在数组中,然后在添加行之后将值相应地分配给下拉列表。

这里是一种方法。您可以使用一个变量跟踪最近选择的下拉列表值,当您向DOM添加新的下拉列表时,它将使用该值作为其初始值

var lastUpdatedDropdownValue=”“;
功能更新(事件){
lastUpdatedDropdownValue=event.target.value;
}
函数addNewDropdown(){
var dropdown=document.querySelector(“[name=qty\u dropdown]”);
var newDropdown=dropdown.cloneNode(true);//确保没有重复的ID。如果要克隆的元素有ID,请在重新插入DOM之前删除它们
document.getElementById(“dropdownContainer”).append(newDropdown);
var selectedOption=newDropdown.querySelector(“[value=”+lastUpdatedDropdownValue+“]”);
selectedOption.selected=true;
}
添加新下拉列表
1.
2.
3.
4.
5.
6.
7.
8.
9
10

这里有一种方法可以做到这一点。您可以使用一个变量跟踪最近选择的下拉列表值,当您向DOM添加新的下拉列表时,它将使用该值作为其初始值

var lastUpdatedDropdownValue=”“;
功能更新(事件){
lastUpdatedDropdownValue=event.target.value;
}
函数addNewDropdown(){
var dropdown=document.querySelector(“[name=qty\u dropdown]”);
var newDropdown=dropdown.cloneNode(true);//确保没有重复的ID。如果要克隆的元素有ID,请在重新插入DOM之前删除它们
document.getElementById(“dropdownContainer”).append(newDropdown);
var selectedOption=newDropdown.querySelector(“[value=”+lastUpdatedDropdownValue+“]”);
selectedOption.selected=true;
}
添加新下拉列表
1.
2.
3.
4.
5.
6.
7.
8.
9
10

发布一些代码,告诉我们您正在尝试什么。动态ID将解决您的问题。添加了一些代码。感谢您提供一些代码,并向我们展示您正在尝试的内容。动态ID将解决您的问题。添加了一些代码。如果可能的话,谢谢你。我希望通过onchange事件实现同样的效果,因为用户不单击按钮来添加新行,而是在选择类别和零件后创建新行。这就解决了您的问题,一旦添加了select选项new row并保留了以前的值,我还没有将其应用到我的代码中,因为这需要我进行一些修补。但是,是的,它看起来应该起作用。谢谢。很高兴能帮助你。:)。如果你遇到任何问题,请告诉我:)如果可能的话。我希望通过onchange事件实现同样的效果,因为用户不单击按钮来添加新行,而是在选择类别和零件后创建新行。这就解决了您的问题,一旦添加了select选项new row并保留了以前的值,我还没有将其应用到我的代码中,因为这需要对我的pa进行一些修补