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

Question

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

第二件事是我需要从列表中更改 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。 关于如何解决问题并使用列表中的等效项填充选项的任何想法？

Answer 1

我建议您首先制作一个 object，其中包含将在 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 object 的原因。

 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）

问题描述

1 个解决方案

解决方案1
0 2022-01-24 09:33:37

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

问题描述

1 个解决方案

解决方案1 0 2022-01-24 09:33:37

解决方案1
0 2022-01-24 09:33:37