如何用jQuery统计汽车品牌/型号下拉选项的选中次数？

我们设有两个下拉菜单，供用户选择汽车品牌（Make）和汽车型号（Model），对应的HTML代码如下：

<select class="car-sel" name="make">
   <option value="">-- Car Make --</option>
   <option value="Acura">Acura</option>
   <option value="Acura">Audi</option>
   <option value="BMW">BMW</option>
   <option value="BMW">Mercedes Benz</option>
</select>

当选中Audi时，型号下拉菜单会加载对应选项：

<select class="car-sel" name="model">
    <option value="">-- Model --</option>
    <option value="A1">A1</option>
    <option value="A3">A3</option>
    <option value="A4">A4</option>
    <option value="A5">A5</option>
</select>

这些选项数据存储在数据库表中，选中品牌后会动态加载对应型号。我们希望统计如“BMW”这类品牌，或“Audi A1”这类品牌+型号的选中次数。由于数据量庞大，无法逐个指定选项值进行统计，且后续需将统计结果存入数据库，请问该如何实现这一统计功能？

1. 先修正HTML基础错误 #

首先要修正下拉菜单的value值错误（这是统计准确的前提）：

• Audi选项的value应改为"Audi"（原代码写的"Acura"）
• Mercedes Benz选项的value应改为"MercedesBenz"或"Mercedes-Benz"（原代码写的"BMW"）

2. 前端统计逻辑（jQuery） #

通过监听下拉框的change事件，动态获取当前选中的品牌/型号值，无需提前枚举所有选项，直接发送统计请求到后端：

2.1 监听下拉框变化事件 #

// 监听品牌下拉框的选中变化
$('select[name="make"]').on('change', function() {
    const makeValue = $(this).val();
    const makeText = $(this).find('option:selected').text().trim();
    
    // 仅选中有效品牌时触发统计
    if (makeValue) {
        sendStats({
            type: 'make',
            key: makeValue,
            displayText: makeText
        });
    }
});

// 监听型号下拉框的选中变化
$('select[name="model"]').on('change', function() {
    const makeValue = $('select[name="make"]').val();
    const modelValue = $(this).val();
    
    // 必须同时选中品牌和有效型号才统计组合项
    if (makeValue && modelValue) {
        const makeText = $('select[name="make"]').find('option:selected').text().trim();
        const modelText = $(this).find('option:selected').text().trim();
        const combinedKey = `${makeValue}_${modelValue}`; // 用下划线拼接作为唯一标识
        const combinedText = `${makeText} ${modelText}`;
        
        sendStats({
            type: 'make_model',
            key: combinedKey,
            displayText: combinedText
        });
    }
});

2.2 发送统计数据到后端 #

// 防抖处理：避免用户频繁切换重复提交（可选）
let debounceTimer;
function sendStats(data) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        $.ajax({
            url: '/api/car-stats', // 替换为你的后端接口地址
            method: 'POST',
            data: data,
            success: () => console.log('统计数据提交成功'),
            error: (xhr) => console.error('统计提交失败:', xhr.responseText)
        });
    }, 1000); // 用户停止操作1秒后再提交
}

3. 后端处理与数据库存储 #

后端接收前端的统计数据，更新数据库中的选中计数，无需提前预设所有统计项：

3.1 数据库表设计 #

创建car_selection_stats表，结构如下：

3.2 后端逻辑示例（以PHP为例） #

<?php
// /api/car-stats 接口处理逻辑
$type = $_POST['type'];
$key = $_POST['key'];
$displayText = $_POST['displayText'];

// 连接数据库（PDO示例）
$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');

// 先查询是否已有该统计项
$stmt = $pdo->prepare("SELECT count FROM car_selection_stats WHERE stats_key = ? AND stats_type = ?");
$stmt->execute([$key, $type]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);

if ($row) {
    // 已有记录，计数+1
    $updateStmt = $pdo->prepare("UPDATE car_selection_stats SET count = count + 1, updated_at = NOW() WHERE stats_key = ? AND stats_type = ?");
    $updateStmt->execute([$key, $type]);
} else {
    // 无记录，插入新统计项
    $insertStmt = $pdo->prepare("INSERT INTO car_selection_stats (stats_key, stats_text, stats_type, count, created_at, updated_at) VALUES (?, ?, ?, 1, NOW(), NOW())");
    $insertStmt->execute([$key, $displayText, $type]);
}

echo json_encode(['status' => 'success']);
?>

4. 关键注意事项 #

• 避免重复统计：前端的防抖处理可以减少用户频繁切换导致的无效请求
• 唯一性保障：品牌+型号的组合用品牌值_型号值作为唯一key，避免不同品牌下型号重名的冲突
• 性能优化：如果数据量极大，可在前端缓存多个统计请求，批量发送到后端，降低数据库压力

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