[英]Dinamically populating the select options but changing the textContent values (not Jquery please)
我有這個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。 關於如何解決問題並使用列表中的等效項填充選項的任何想法?
我建議您首先制作一個 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.