資料
0: {id: 1, banks: 'b1', code: 'active'}
1: {id: 2, banks: 'b2', code: 'parking'}
2: {id: 3, banks: 'b3', code: 'safe'}
3: {id: 4, banks: 'b4', code: 'active'}
4: {id: 5, banks: 'b5', code: 'safe'}
5: {id: 6, banks: 'b6', code: 'parking'}
//代碼開始追加到html中
$('#selectiona').append($('<select name="bankselect" ></select>'));
$.each(data.bank, function (i, item) {
$('.bankselect').append($('<option>', {
value: item.id,
text : item.banks
}));
});
結果
<select name="bankselect" class="bankselect">
<option value="1">b1</option>
<option value="2">b2</option>
<option value="3">b3</option>
<option value="4">b4</option>
<option value="5">b5</option>
<option value="6">b6</option>
</select>
問題： 我是 JavaScript 的初學者。上面的代碼是使用 JavaScript 代碼將選擇框附加到 html 并回圈資料以將選項值插入其中的作業。但我堅持如何回圈并將其分配到選擇中的optgroup中。任何人都可以幫助那個TT？
預期的最終結果
<select name="bankselect" id="bankselect">
<optgroup label="active">
<option value="1">b1</option>
<option value="4">b4</option>
</optgroup>
<optgroup label="parking">
<option value="2">b2</option>
<option value="6">b6</option>
</optgroup>
<optgroup label="safe">
<option value="3">b3</option>
<option value="5">b5</option>
</optgroup>
</select>
uj5u.com熱心網友回復：
您的資料無法重現，下次請提供能夠重現的樣本資料。
我首先使用重新格式化資料，以使其準備好迭代并呈現為 HTML。然后我使用for..loop 在 HTML 字串中呈現，然后附加到 HTML 元素中。
這是代碼。
let data = {
bank: {
0: {
id: 1,
banks: 'b1',
code: 'active'
},
1: {
id: 2,
banks: 'b2',
code: 'parking'
},
2: {
id: 3,
banks: 'b3',
code: 'safe'
},
3: {
id: 4,
banks: 'b4',
code: 'active'
},
4: {
id: 5,
banks: 'b5',
code: 'safe'
},
5: {
id: 6,
banks: 'b6',
code: 'parking'
}
}
};
// reformat data.
let reformatted = {};
$.each(data.bank, function(i, item) {
if (!reformatted[item.code]) {
reformatted[item.code] = [];
}
reformatted[item.code].push({
value: item.id,
text: item.banks,
});
});
$('#selectiona').append($('<select name="bankselect" ></select>'));
// render HTML string of select option and optgroup.
let bankSelectbox = document.querySelector('.bankselect');
let renderedHTMLString = '';
// loop group names
for (const [groupname, items] of Object.entries(reformatted)) {
renderedHTMLString = '<optgroup label="' groupname '">';
// loop items for select > option
for (const eachItem of items) {
renderedHTMLString = '<option value="' eachItem.value '">' eachItem.text '</option>';
}
renderedHTMLString = '</optgroup>';
}
// now append HTML string to HTML element.
bankSelectbox.insertAdjacentHTML('beforeend', renderedHTMLString);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selectiona"></div>我使用您$.each()重新格式化資料，然后使用純 JSfor()回圈來呈現 HTML。這減少了 jQuery 的使用。
看到它在jsfiddle上作業。
uj5u.com熱心網友回復：
您可以使用一個物件和兩個 for 回圈來執行此操作，如下所示：
const select = document.getElementById("bankselect");
const sortedData = {};
const data = [
{ id: 1, banks: "b1", code: "active" },
{ id: 2, banks: "b2", code: "parking" },
{ id: 3, banks: "b3", code: "safe" },
{ id: 4, banks: "b4", code: "active" },
{ id: 5, banks: "b5", code: "safe" },
{ id: 6, banks: "b6", code: "parking" }
];
for (let i = 0; i < data.length; i) {
sortedData[data[i].code] ??= [];
sortedData[data[i].code].push(data[i]);
}
const entries = Object.entries(sortedData);
for (let i = 0; i < entries.length; i) {
const [key, values] = entries[i];
const optGroup = document.createElement("optgroup");
optGroup.label = key;
for (let j = 0; j < values.length; j) {
const opt = document.createElement("option");
opt.value = values[j].id;
opt.innerText = values[j].banks;
optGroup.append(opt);
}
select.append(optGroup);
}<div id="app">
<select name="bankselect" class="bankselect" id="bankselect"> </select>
</div>uj5u.com熱心網友回復：
細節在例子中注釋
/**
* data.banks
*/
const data = {
bank: [{
id: 1,
banks: 'b1',
code: 'active'
},
{
id: 2,
banks: 'b2',
code: 'parking'
},
{
id: 3,
banks: 'b3',
code: 'safe'
},
{
id: 4,
banks: 'b4',
code: 'active'
},
{
id: 5,
banks: 'b5',
code: 'safe'
},
{
id: 6,
banks: 'b6',
code: 'parking'
}
]
};
/**
* Define array
* Add <select> to <form>
*/
const array = data.bank;
$('#form1').append(`<select name="bankselect" ></select>`);
/**
* .map() an array of item.code
* Remove duplicate values and name the array "labels"
*/
const groups = $.map(array, function(item) {
return item.code;
});
const labels = [...new Set(groups)];
/**
* Create an <optgroup> with a label attribute of the
* current value of the "labels" array
*/
$.each(labels, function(i, label) {
$('.bankselect').append(
`<optgroup label="${label}"></optgroup>`);
});
/**
* For each <optgroup>
* Define current <optgroup>
* Define current <optgroup> label
* Then for each item of array...
* If item.code equals current <optgroup> label...
* add am <option> with value of item.id and text of
* item.banks
*/
$('optgroup').each(function() {
let currentOG = $(this);
let code = currentOG.attr('label');
$.each(array, function(i, item) {
if (item.code === code) {
currentOG.append(`<option value="${item.id}">${item.banks}</option>`);
}
});
});<form id='form1'></form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/505000.html
標籤：javascript html jQuery html-选择 选择组
下一篇：超時后如何終止長時間運行的功能