动态填充 select 选项但更改 textContent 值（请不要 Jquery）

Question

我有这个 select，我正在从 localStorage 字符串动态填充它的 options。但是我运行遇到了问题；当 select 多次重复选项时，每次都会增加。

第二件事是我需要更改列表中的 textContent 而不是显示选项值。

这是我的 javascript;

    function populatepymnt(key){
    var select = document.getElementById("pymntselect");

    var i=select.options.length-1;i>=1;i--;

    var all = JSON.parse(localStorage.getItem(key));

    var payments = all[0].payments;

    var taxes = [];

    for (var i in payments[0]){
        if ((i != "total") && (i != "di") && (i !="myp") && (!i.includes("br")) && (i!="lapse") && (i != "id") && (i != "ldate"))
        {
            taxes.push(i);
        }
    }
    for(var i = 0; i < taxes.length; i++){
    var el = document.createElement("option");
    el.textContent = taxes[i];
    el.value = taxes[i];
    select.appendChild(el);
    }
}

这是localStorage字符串；

    [{"payments":
    [{"id":"1",
    "ldate":"10/01/2022 12:00 am",
    "lapse":"Unde at voluptate ma",
    "di":"71",
    "myp":"27",
    "pirtcp":"100",
    "pirtcpbr":"Adipisci quia magna ",
    "pcvs":"3756",
    "pcvsbr":"Voluptatum voluptate",
    "rent":"65",
    "rentbr":"Reprehenderit aliqu"},{"id":"2",
    "ldate":"02/01/2022 12:00 am",
    "lapse":"Mollit qui blanditii",
    "di":"10",
    "myp":"30",
    "pirtcp":"92",
    "pirtcpbr":"Explicabo Optio et",
    "pcvs":"63546",
    "pcvsbr":"Tempora ut perferend",
    "rent":"30",
    "rentbr":"Impedit molestiae e"
    }]
}]

这是我的 html;

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script>
    var data = [{"payments":[{"id":"1","ldate":"10/01/2022 12:00 am","lapse":"Unde at voluptate ma","di":"71","myp":"27","pirtcp":"100","pirtcpbr":"Adipisci quia magna ","pcvs":"3756","pcvsbr":"Voluptatum voluptate","rent":"65","rentbr":"Reprehenderit aliqu"},{"id":"2","ldate":"02/01/2022 12:00 am","lapse":"Mollit qui blanditii","di":"10","myp":"30","pirtcp":"92","pirtcpbr":"Explicabo Optio et","pcvs":"63546","pcvsbr":"Tempora ut perferend","rent":"30","rentbr":"Impedit molestiae e",}]}]
    localStorage.setItem("f7Clients", JSON.stringify(data));
    </script>
</head>
<body>
    <table align="center" style="width: 430px;">
        <tr>
            <td align="right">Services:</td>
            <td>
                <select id="pymntselect" onclick="populatepymnt('f7Clients')" style="width: 200px;">
                    <option value="All">All</option>
                </select>
            </td>

            <td align="right">Services:</td>
            <td>
                <select style="width: 200px;">
                    <option selected value="All">All</option>
                    <option value="pirtcp">Car tax</option>
                    <option value="pcvs">House tax</option>
                    <option value="rent">Other taxes</option>
                </select>
            </td>
        </tr>
    </table>

    <script src="index.js"></script>
</body>
</html>

这是我想使用的 textContent 个等价物的列表；

pirtcp = Car tax
pcvs = House tax
rent = Other tax

如您所见，有两个 select。第二个只是为了展示我需要如何安排第一个 select。关于如何解决问题并使用列表中的等效项填充选项的任何想法？

Answer 1

我建议您首先创建一个对象，其中包含将在 select 下拉列表中填充的所有税费：

const taxes = {
  pirtcp: 'Car tax',
  pcvs: 'House tax',
  rent: 'Other taxes',
}

然后更新 populatepymnt() 以清除除默认 All 之外的所有选项，从 localStorage 获取键并填充下拉列表。

function populatepymnt(key) {
  select.innerHTML = '<option value="All">All</option>'
  const all = JSON.parse(localStorage.getItem(key))
  const payments = all[0].payments

  /* 
    Instead of looping through all of 'payments[0]' keys, loop through 
    the keys in 'taxes' and check if they exist in 'payments[0]'
  */
  for (const key in taxes) {
    if (payments[0][key]) {
      const el = document.createElement('option')
      el.value = key
      el.textContent = taxes[key]
      select.appendChild(el)
    }
  }
}

这是一个工作示例。请注意，这些片段不允许访问 localStorage，这就是我直接使用 data 对象的原因。

const taxes = {
  pirtcp: 'Car tax',
  pcvs: 'House tax',
  rent: 'Other taxes',
}

const data = [{"payments":[{"id":"1","ldate":"10/01/2022 12:00 am","lapse":"Unde at voluptate ma","di":"71","myp":"27","pirtcp":"100","pirtcpbr":"Adipisci quia magna ","pcvs":"3756","pcvsbr":"Voluptatum voluptate","rent":"65","rentbr":"Reprehenderit aliqu"},{"id":"2","ldate":"02/01/2022 12:00 am","lapse":"Mollit qui blanditii","di":"10","myp":"30","pirtcp":"92","pirtcpbr":"Explicabo Optio et","pcvs":"63546","pcvsbr":"Tempora ut perferend","rent":"30","rentbr":"Impedit molestiae e",}]}]

const select = document.getElementById('pymntselect')

function populatepymnt() {
  select.innerHTML = '<option value="All">All</option>'
  const payments = data[0].payments
  for (const key in taxes) {
    if (payments[0][key]) {
      const el = document.createElement('option')
      el.value = key
      el.textContent = taxes[key]
      select.appendChild(el)
    }
  }

  /* Just for debugging */
  select.addEventListener('change', () => {
    console.clear()
    console.log('Value = ', select.value)
  })
  /* ------------------ */
}

populatepymnt()

<select id="pymntselect" style="width: 200px">
  <option value="All">All</option>
</select>

动态填充 select 选项但更改 textContent 值（请不要 Jquery）

Dinamically populating the select options but changing the textContent values (not Jquery please)

html

javascript

local-storage