使用JavaScript中的默认值创建动态选择列表

我不想创建带有默认选定值的动态下拉菜单。从下拉菜单创建可以很好地工作，但是当我设置默认值时，这不起作用。仅为最后一个下拉列表设置了默认值。我必须创建一个示例：

let brand=[{
“品牌”：“奥迪”
},
{
“品牌”：“梅赛德斯”
}
]
$（文档）.ready（函数（）{
createTableBody（）
})
函数createTableBody（）{
var table=document.getElementById（'myTable'）
对于（变量i=0；i<5；i++）{
变量行=`
${i}
品牌
`
table.innerHTML+=行
createDropdown（品牌，i）
}
}
函数createDropdown（数据，x）{
var selectList=document.getElementById（'brand'+x）
//从选项元素创建和插入
对于（变量i=0；i

身份证件
烙印

您可以这样做：

function createTableBody() {
  var table = document.getElementById('myTable')
  for (var i = 0; i < 5; i++) {
    var row = `<tr>
                    <td>${i}</td>
                    <td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
               </tr>`
    table.innerHTML += row
  }
  createDropdown()
}

function createDropdown() {
  var selectList = document.querySelectorAll('select[id^=brand]')
  //create and insert from the option element
  for (var j = 0; j < selectList.length; j++) {
    for (var i = 0; i < brand.length; i++) {
      var option = document.createElement("option")
      option.value = brand[i].brand
      option.text = brand[i].brand
      selectList[j].appendChild(option)
    }
    selectList[j].value = "mercedes"
  }
  console.log(selectList)
}

函数createTableBody（）{
var table=document.getElementById（'myTable'）
对于（变量i=0；i<5；i++）{
变量行=`
${i}
品牌
`
table.innerHTML+=行
}
createDropdown（）
}
函数createDropdown（）{
var selectList=document.querySelectorAll（'select[id^=brand]”）
//从选项元素创建和插入
对于（var j=0；j

我认为问题在于您多次更新了innerhtml，因此我认为这是在重置过去选择的选定值

演示

let brand=[{
“品牌”：“奥迪”
},
{
“品牌”：“梅赛德斯”
}
]
$（文档）.ready（函数（）{
createTableBody（）
})
函数createTableBody（）{
var table=document.getElementById（'myTable'）
对于（变量i=0；i<5；i++）{
变量行=`
${i}
品牌
`
table.innerHTML+=行
}
createDropdown（）
}
函数createDropdown（）{
var selectList=document.querySelectorAll（'select[id^=brand]”）
//从选项元素创建和插入
对于（var j=0；j

身份证件
烙印

您可以这样做：

function createTableBody() {
  var table = document.getElementById('myTable')
  for (var i = 0; i < 5; i++) {
    var row = `<tr>
                    <td>${i}</td>
                    <td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
               </tr>`
    table.innerHTML += row
  }
  createDropdown()
}

function createDropdown() {
  var selectList = document.querySelectorAll('select[id^=brand]')
  //create and insert from the option element
  for (var j = 0; j < selectList.length; j++) {
    for (var i = 0; i < brand.length; i++) {
      var option = document.createElement("option")
      option.value = brand[i].brand
      option.text = brand[i].brand
      selectList[j].appendChild(option)
    }
    selectList[j].value = "mercedes"
  }
  console.log(selectList)
}

函数createTableBody（）{
var table=document.getElementById（'myTable'）
对于（变量i=0；i<5；i++）{
变量行=`
${i}
品牌
`
table.innerHTML+=行
}
createDropdown（）
}
函数createDropdown（）{
var selectList=document.querySelectorAll（'select[id^=brand]”）
//从选项元素创建和插入
对于（var j=0；j

我认为问题在于您多次更新了innerhtml，因此我认为这是在重置过去选择的选定值

演示

let brand=[{
“品牌”：“奥迪”
},
{
“品牌”：“梅赛德斯”
}
]
$（文档）.ready（函数（）{
createTableBody（）
})
函数createTableBody（）{
var table=document.getElementById（'myTable'）
对于（变量i=0；i<5；i++）{
变量行=`
${i}
品牌
`
table.innerHTML+=行
}
createDropdown（）
}
函数createDropdown（）{
var selectList=document.querySelectorAll（'select[id^=brand]”）
//从选项元素创建和插入
对于（var j=0；j

身份证件
烙印

问题在于

table.innerHTML += row;

这和

table.innerHTML = table.innerHTML + row;

获取元素的

.innerHTML

只获取HTML，而不获取当前选定的值

您可以通过附加HTML而不是替换HTML来解决这个问题，例如（标记为jquery）

这将保留所有现有选定值，因为它们不会被替换

let brand=[{
“品牌”：“奥迪”
},
{
“品牌”：“梅赛德斯”
}
]
$（文档）.ready（函数（）{
createTableBody（）
})
函数createTableBody（）{
//var table=document.getElementById（'myTable'）
var表=$（“#myTable”）；
对于（变量i=0；i<5；i++）{
变量行=`
${i}
品牌
`
//table.innerHTML+=行
表.追加（行）；
createDropdown（品牌，i）
}
}
函数createDropdown（数据，x）{
var selectList=document.getElementById（'brand'+x）
//从选项元素创建和插入
对于（变量i=0；i