我有一個適用于簡單值的下拉串列，但我只是嘗試使用陣列作為值，現在初始下拉條目為空。
我創建了一個REPL來說明這個問題。如您所見，我也嘗試使用selected=...自動選擇第一個條目，但它不起作用。
唯一能想到的就是引入另一個屬性，回到簡單的值，然后通過過濾原始陣列來提取陣列，但是看起來比較麻煩。我想知道我是否缺少另一種更優雅的方式。
先感謝您！
編輯：這里是建議的代碼示例：
<script>
const availableFilters = [
{ key: ['filterAll'], display: 'All Columns' },
{ key: ['name1', 'name2' ], display: 'Entry Names' },
{ key: ['ID1', 'ID2' ], display: 'Entry IDs' },
{ key: ['name1'], display: 'Entry 1 Name' },
{ key: ['ID1'], display: 'Entry 1 ID' },
{ key: ['name2'], display: 'Entry 2 Name' },
{ key: ['ID2'], display: 'Entry 2 ID' },
];
const simpleAvailableFilters = [
{ key: 'filterAll', display: 'All Columns' },
{ key: 'name1', display: 'Entry 1 Name' },
{ key: 'ID1', display: 'Entry 1 ID' },
{ key: 'name2', display: 'Entry 2 Name' },
{ key: 'ID2', display: 'Entry 2 ID' },
];
let currentFilter = { key: ['filterAll'], value: "", code: 0 };
let simpleCurrentFilter = { key: 'filterAll', value: "", code: 0 };
</script>
Dropdown with array values:
<select bind:value={currentFilter.key}>
{#each availableFilters as filter, i}
<option selected={i === 0 ? 'selected' : ''} value={filter.key}>{filter.display} - {i}</option>
{/each}
</select>
<span>
Selected key: {currentFilter.key}
</span>
<br/>
Simple Dropdown:
<select bind:value={simpleCurrentFilter.key}>
{#each simpleAvailableFilters as filter, i}
<option value={filter.key}>{filter.display} - {i}</option>
{/each}
</select>
<span>
Selected key: {simpleCurrentFilter.key}
</span>
uj5u.com熱心網友回復：
只需更換
let currentFilter = { key: ['filterAll'], value: "", code: 0 };
經過
let currentFilter = availableFilters[0];
即使物件具有完全相同的結構，它仍然是與陣列中第一個位置的物件不同的物件。{} === {} // false這同樣適用于陣列。
['filterAll'] === ['filterAll'] // false
'filterAll' === 'filterAll' // true
currentFilter那么會有這個結構
{key: *bindedValue*, display: 'All Columns'}
如果要提取陣列，則必須在設定初始值時訪問鍵
let currentFilter = availableFilters[0].key;
并更改選項的系結
<select bind:value={currentFilter}>
REPL Repl 很好，但最好也包含代碼，以防 Repl 可能會損壞......
uj5u.com熱心網友回復：
嘗試這個：
let currentFilter = availableFilters[0].key;
并且您可以selected={i === 0 ? 'selected' : ''}從option.
見https://svelte.dev/tutorial/select-bindings
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/456428.html
標籤：javascript 数组 下拉式菜单 苗条
上一篇：每2列切片矩陣
下一篇：以有效的方式從字串中洗掉特定單詞