如何为多个下拉框设置单个onchange事件简化jQuery Ajax代码？

嘿，作为jQuery新手遇到这种重复代码的问题太正常啦！咱们可以通过提取公共逻辑、利用类选择器和动态ID匹配的方式，把你这段重复的代码简化成一段可复用的逻辑，以后再加更多下拉框也不用复制粘贴啦～

核心思路 #

你的代码里每个下拉框的逻辑几乎完全一致，唯一的区别就是数字后缀（medicine1对应stock1/unit1，medicine2对应stock2/unit2）。所以我们可以：

1. 给所有下拉框添加一个统一的类，比如.medicine-select，用来批量绑定事件
2. 从下拉框的ID里提取数字后缀，动态对应到对应的库存和单位输入框
3. 把重复的AJAX逻辑统一到一个事件处理函数里

修改后的代码 #

首先给你的HTML里的下拉框加上统一的类：

<!-- 第一个下拉组 -->
<select id="medicine1" class="medicine-select">
  <!-- 选项内容 -->
</select>
<input type="text" id="stock1" placeholder="库存">
<input type="text" id="unit1" placeholder="单位">

<!-- 第二个下拉组 -->
<select id="medicine2" class="medicine-select">
  <!-- 选项内容 -->
</select>
<input type="text" id="stock2" placeholder="库存">
<input type="text" id="unit2" placeholder="单位">

然后是简化后的JavaScript代码：

// 给所有带medicine-select类的下拉框绑定change事件
$(document).on('change', '.medicine-select', function(){
    const $select = $(this);
    // 从下拉框ID中提取数字后缀（比如"medicine1" -> "1"）
    const itemNumber = $select.attr('id').replace('medicine', '');
    const selectedMedicine = $select.val();

    // 统一的AJAX请求逻辑
    $.ajax({
        type: "POST",
        url: "<?php echo base_url('example/product')?>",
        dataType: "JSON",
        data: { medicine: selectedMedicine },
        cache: false,
        success: function(data){
            // 用提取到的数字动态匹配对应的输入框
            $(`#stock${itemNumber}`).val(data.stock);
            $(`#unit${itemNumber}`).val(data.unit);
        },
        // 可选：添加错误处理，提升用户体验
        error: function(){
            alert('获取药品信息失败，请稍后重试');
        }
    });

    return false;
});

为什么这样更优？ #

• 可扩展性强：以后再加medicine3、medicine4，只要给下拉框加上.medicine-select类，不需要再写新的事件绑定代码
• 维护成本低：如果要修改AJAX的URL、请求参数或者成功回调逻辑，只需要改这一处代码
• 逻辑更清晰：把重复的逻辑抽离出来，代码结构更简洁，也更容易理解

额外小建议 #

• 如果你的下拉框是动态生成的（比如通过JS添加的），$(document).on的事件委托写法是正确的，能确保新添加的元素也能触发事件
• 可以在AJAX请求开始时给下拉框加个禁用状态，请求完成后恢复，避免用户重复选择：

  // 请求开始时禁用
  $select.prop('disabled', true);
  // 在success和error回调里恢复
  $select.prop('disabled', false);
  

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