我有一個物件陣列，用于其中一個要系結的下拉選單，如下所示
[
{CategoryId: 1, CategoryName: 'Collision'}。
{CategoryId: 2, CategoryName: 'Groundig'}。
]
我能夠用下面的代碼將其系結到下拉選單中
function bindDropDown（data, dropDown, defaultText）{
var items = ""/span>;
items = "<option value=-1>選擇" defaultText "</option> "。
$.each(data, function (i, item) {
items = "<option value="" item.CategoryId "> " item. CategoryName "</option>"。
});
$(dropDown).html（專案）。
}
我想重用它，這樣我就可以在不同的下拉選單中使用同樣的方法，我將得到不同的選項，如
。[
{SubCategoryId: 1, SubCategoryName: 'Collision'}。
{SubCategoryId: 2, SubCategoryName: 'Groundig'}。
]
我想動態地分配值和文本，而不是硬編碼，有什么方法可以做到嗎？
uj5u.com熱心網友回復：
你可以使選擇的id和value動態化。我也使用了引數的默認值。
作業提示
。const data = {
資料: [
{ CategoryId: 1, CategoryName: 'Collision' },
{ CategoryId: 2, CategoryName: 'Groundig' }
]
}
const data2 = {
資料: [
{ SubCategoryId: 1, SubCategoryName: 'Collision2' },
{ SubCategoryId: 2, SubCategoryName: 'Groundig' }
]
}
function bindDropDown（data, dropDown, defaultText, idKey="CategoryId", nameKey="CategoryName") {
var items = "";
items = "<option value=-1>選擇" defaultText "</option> "。
$.each(data.Data, function (i, item) {
items = "<option value="" item[idKey] ">" item[nameKey] "</option> "。
});
$(dropDown).html（專案）。
}
bindDropDown(data, "#my-select"/span>, "please-select"/span>)。
bindDropDown(data2, "#my-select-2", "please-select", "SubCategoryId", "SubCategoryName"）。) <script src="https://ajax. googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">< /script>
<select name="" id="my-select">> </select>>
<select name="" id="my-select-2">> </select>uj5u.com熱心網友回復：
如果你不知道或不需要知道鍵的名稱，請使用Object.values
。另外，如果你不使用jQuery來創建選項，我建議你使用模板字面來創建它們。可讀性要高得多
。const data = {
資料: [
{ CategoryId: 1, CategoryName: 'Collision' },
{ CategoryId: 2, CategoryName: 'Groundig' }
]
}
const data2 = {
資料: [
{ SubCategoryId: 1, SubCategoryName: 'Collision2' },
{ SubCategoryId: 2, SubCategoryName: 'Groundig2' }
]
}
function bindDropDown（data, dropDown, defaultText）{
let items = [`<option value="-1" selected> Select ${defaultText}</option>`,
... data.Data。 map(item => `<option value="${Object. values(item)[0]}">${Object.values(item)[1]}</option> `) ]
$(dropDown).html(items.join(""/span>))。
}
bindDropDown(data, "#categories", "請選擇")。
bindDropDown(data2, "#subcategories", "請選擇");<script src="https://ajax. googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">< /script>
<select name="" id="categories">> </select>>
<select name="" id="subcategories"/span>> </select> 轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/321660.html
標籤：