如何实现下拉框选中First国家时随机生成对应优惠券值

嗨，我来帮你搞定这个需求！你已经完成了国家去重的下拉框，但现在需要实现选中"First"时，从它对应的三个优惠券里随机返回一个，对吧？咱们一步步来调整代码：

问题分析 #

你原来的代码生成下拉框时，option的value直接用了当前循环到的value.coupon，但因为去重逻辑，"First"只会被添加一次，对应的value是第一次循环到的"1"，所以选中后只能固定显示这个值。咱们得先把每个国家对应的所有优惠券存起来，这样才能在选中时随机取值。

解决方案步骤 #

1. 先预处理原始数据，建立国家与优惠券的映射

先把原始JSON里的每个国家对应的优惠券都收集到一个对象里，方便后续快速查找：

// 你的原始JSON数据
const couponData = [ 
    { "country":"First", "coupon":["1"] }, 
    { "country":"First", "coupon":["10"] }, 
    { "country":"First", "coupon":["12"] }, 
    { "country":"Second", "coupon":"2" }, 
    { "country":"third", "coupon":"3" }, 
    { "country":"fourth", "coupon":"4" }, 
    { "country":"fifth", "coupon":"5" } 
];

// 预处理：把每个国家的优惠券整理成数组
const countryCouponMap = {};
couponData.forEach(item => {
    const country = item.country;
    // 统一转成数组格式，兼容原始数据里的字符串和数组类型
    const coupons = Array.isArray(item.coupon) ? item.coupon : [item.coupon];
    
    if (!countryCouponMap[country]) {
        countryCouponMap[country] = [];
    }
    // 把优惠券合并进去（原始数据里First的优惠券无重复，直接push即可）
    countryCouponMap[country].push(...coupons);
});

2. 重新生成去重的下拉框

这次生成下拉框时，option的value存国家名称（逻辑更清晰，选中后通过国家找优惠券）：

const sortedCountries = [];
const $select = $('#sel');
$select.empty(); // 先清空下拉框，避免重复添加

couponData.forEach(item => {
    const country = item.country;
    if (sortedCountries.indexOf(country) === -1) {
        $select.append(`<option value="${country}">${country}</option>`);
        sortedCountries.push(country);
    }
});

3. 添加下拉框的change事件，实现随机优惠券逻辑

当用户选中选项时，判断是否是"First"，是就随机选优惠券，否则直接取对应值：

$select.on('change', function() {
    const selectedCountry = $(this).val();
    let targetCoupon;

    if (selectedCountry === "First") {
        // 从First的优惠券列表里随机选一个
        const firstCoupons = countryCouponMap[selectedCountry];
        const randomIdx = Math.floor(Math.random() * firstCoupons.length);
        targetCoupon = firstCoupons[randomIdx];
    } else {
        // 其他国家直接取对应的优惠券（假设每个国家只有一个）
        targetCoupon = countryCouponMap[selectedCountry][0];
    }

    // 这里把结果展示出来，比如打印到控制台或者渲染到页面
    console.log("当前优惠券：", targetCoupon);
    // 要是想显示在页面上，可以用 $('#coupon-show').text(targetCoupon);
});

小细节说明 #

• 数据预处理时统一转成数组，不管原始数据是字符串还是数组，后续逻辑更统一；
• 随机数用Math.floor(Math.random() * 数组长度)生成，能确保取到合法的数组索引；
• 用国家作为option的value，比直接存优惠券更灵活，后续如果其他国家也需要多优惠券逻辑，改起来更方便。

内容的提问来源于stack exchange，提问作者Govind Narayan