jQuery动态设置Select选项：高效实现与变量管理最佳实践

id = value[0]
rate = value[1]
name = value[2]
time_rate_default = value[3] // true or false

'use strict'; // 启用严格模式

// 假设 value 是一个包含 [id, rate, name, time_rate_default] 的数组
// 使用解构赋值，同时声明为 const
const [id, rate, name, time_rate_default] = value;
// 或者在循环回调中直接解构
// $.each(time_rates_for_select, (_, [id, rate, name, time_rate_default]) => { ... });

const $select = $("#time-rate-select"); // 缓存选择器

jQuery.each(time_rates_for_select, (_, [id, rate, name, time_rate_default]) => {
    // 使用模板字面量构建选项HTML
    $select.append(`<option value="${id}">${rate} - ${name}</option>`);

    // ... 后续设置选中项的逻辑
});

'use strict';

const $select = $("#time-rate-select");

jQuery.each(time_rates_for_select, (_, [id, rate, name, time_rate_default]) => {
    // 1. 追加选项
    $select.append(`<option value="${id}">${rate} - ${name}</option>`);

    // 2. 根据条件设置选中项
    // 如果 time_rate_default 为 true，则设置当前选项为选中
    if (time_rate_default) {
        $select.val(id);
    }
    // 更简洁的写法: time_rate_default && $select.val(id);
});

'use strict'; // 启用严格模式，强制执行更严格的JavaScript规则

// 假设 time_rates_for_select 是一个包含多个数组的数组，
// 每个子数组结构为 [id, rate, name, time_rate_default (boolean)]
const time_rates_for_select = [
    [1, '10/hr', 'Standard', false],
    [2, '15/hr', 'Premium', true], // 这个将是默认选中项
    [3, '8/hr', 'Economy', false]
];

// 缓存对 <select> 元素的jQuery引用，避免重复查询DOM
const $select = $("#time-rate-select");

// 清空现有选项（如果需要的话，例如在重新加载数据时）
// $select.empty();

// 遍历数据并动态生成选项
jQuery.each(time_rates_for_select, (_, [id, rate, name, time_rate_default]) => {
    // 使用ES6模板字面量构建 <option> 元素的HTML字符串，代码更简洁易读
    $select.append(`<option value="${id}">${rate} - ${name}</option>`);

    // 如果 time_rate_default 为 true，则设置当前追加的选项为选中状态
    // jQuery的 .val() 方法可以方便地设置 <select> 的选中值
    if (time_rate_default) {
        $select.val(id);
    }
    // 也可以写成更紧凑的形式：time_rate_default && $select.val(id);
});

// 假设HTML结构如下：
/*
<select id="time-rate-select">
    <!-- 动态生成的选项将追加到这里 -->
</select>
*/