JavaScript 選單動態載入：with 陳述式與 options[length] 陷阱

程式碼使用 with (ss) 導致讀取困難，核心邏輯是動態填充 <select> 選項。

with 陳述式的副作用

with (ss) {
    length = 0;           // 實為 ss.length = 0，清空選項
    options[0] = new Option(...); // 實為 ss.options[0] = ...
    // 迴圈中
    options[length] = new Option(ar[i], ar[i]); // 關鍵：length 隨 options 增加而自增
}

• ss.length 反映目前選項數量。
• options[length] 等同 options[ss.length]，**永遠指向陣列尾端**，實現「追加」效果。
• 若改為 options[i]，會覆蓋既有索引，導致只有最後一項生效。

現代寫法：移除 with，明確參考

const sel = document.getElementById(s[v]);
sel.length = 0; // 清空
sel.options[0] = new Option(opt0[v], opt0[v]);
if (v && document.getElementById(s[v-1]).selectedIndex > 0 || !v) {
    if (dsy.Exists(str)) {
        const ar = dsy.Items[str];
        ar.forEach(item => {
            sel.options[sel.length] = new Option(item, item); // 追加
        });
        if (v) sel.options[1].selected = true;
    }
}

with 陳述式缺點

• 變數解析模糊，易產生非預期的全域變數。
• 嚴格模式 ('use strict') 禁用 with。
• 現代最佳實務：**完全避免使用 with**。

理解 select.length 與 options 的動態關係，才能正確動態操作下拉選單。