Question

我有一个程序根据下拉菜单中的部件选择生成表行。在创建的每一行上，我有一个<td>元素，其中包含数量下拉列表。我的问题是，当选择一个新部件从而创建一个新行时，我的所有数量下拉菜单都会重置为默认值1.我尝试用“selected = true;”修复它但这似乎不起作用。基本上，我需要将每个数量下拉列表的选定值设置为当用户添加新行时最后设置的任何选定值。我正在使用ajax调用从每个新行的SQL表生成数据。

这是从选择下拉列表中调用的函数。我省略了很多不必要的代码：

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()内部执行的功能（我将其重命名为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];
    }
}

此函数add（）将添加一个新行而不重置上一个下拉列表。

演示：https://jsfiddle.net/0wur28ot/

我所做的是在添加新行之前保存数组中的值，然后在添加行后相应地为下拉列表赋值。

Answer 2

这是你可以做到的一种方式。您可以保留一个变量来跟踪最近选择的下拉值，当您向DOM添加新下拉列表时，它将使用该值作为其初始值。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: