如何获取克隆选项选择菜单的值？

Question

我在 html 中有一个非常大的下拉菜单，带有“选择选项”。因为我想多次使用这个菜单，所以我想通过使用jQuery“clone and appendTo”来复制下拉菜单。

但是我如何获得克隆下拉菜单的值呢？这是我尝试过的。它为 selectedValueCar2 返回“未定义”

  FocusNode textFieldOne = FocusNode();
  FocusNode textFieldTwo = FocusNode();

  // ...

  TextFormField(
        onChanged: (_) {
           textFieldTwo.requestFocus();
        },
        focusNode: textFieldOne,
        controller: textController,
  )

Answer 1

为了“克隆”html元素，你必须得到它的Html。然后将其加载到一个变量中，以便您可以在其他地方将其用作 html。看看我的例子：

Answer 2

如果你在浏览器中打开页面并检查它，你会看到问题所在。

它将整个 <select id="list1">...</select> 克隆到 <select id="list2"> 而不仅仅是 <option> 标签。所以 document.getElementById("list2").value 没有值 (<option value="xxx">) 所以你看到“undefined”

HTML view after clone

Answer 3

谢谢。我现在的解决方案是，在克隆时更改 ID 属性。

const obj = {
  '2021-02-28': [
    { name: 'Person 1', date: '2021-02-28T14:00:00.000+0000' },
    { name: 'Person 2', date: '2021-02-28T19:15:00.000+0000' }
  ],
  '2021-04-04': [{ name: 'Person 3', date: '2021-04-04T18:30:00.000+0000' }],
  '2021-05-11': [
    { name: 'Person 4', date: '2021-05-11T19:00:00.000+0000' },
    { name: 'Person 6', date: '2021-05-11T19:00:00.000+0000' }
  ],
  '2021-05-12': [{ name: 'Person 5', date: '2021-05-12T18:45:00.000+0000' }],
  '2021-05-23': [{ name: 'Person 7', date: '2021-05-23T15:00:00.000+0000' }]
}

const newObj = {}
const newSubObj = {}

for (const [key, value] of Object.entries(obj)) {
  newObj[key] = []
  newSubObj[key] = []

  for (const item of value) {
    const date = new Date(item.date)
    const subDate = item.date.substr(11, 5)

    const hours = date.getUTCHours()
    const minutes = date.getUTCMinutes()

    newObj[key].push({ name: item.name, time: `${hours}:${minutes}` })
    newSubObj[key].push({ name: item.name, time: subDate })
  }
}

console.log(newObj, newSubObj)