如何将Blade中输入框与下拉框值绑定到按钮data属性用于jQuery

首先要注意：HTML中id是全局唯一标识，你的多个fieldset里重复使用target_value和unit作为id会导致选择器失效（只能选中第一个匹配元素），所以第一步要把这些id改成class，确保每个fieldset内的元素能正确关联。

1. 修正Blade模板的HTML结构 #

把重复的id替换为class，同时给fieldset和按钮添加标识类，方便后续选择：

@foreach($yourData as $item)
<fieldset class="target-group">
  <!-- 把id改为class -->
  <input type="text" class="target-value" value="{{ old('target_value', $item->target_value ?? '') }}">
  <select class="unit">
    <option value="kg" {{ old('unit', $item->unit ?? '') == 'kg' ? 'selected' : '' }}>千克</option>
    <option value="m" {{ old('unit', $item->unit ?? '') == 'm' ? 'selected' : '' }}>米</option>
    <!-- 其他选项 -->
  </select>
  <button type="button" class="save-btn" data-unit="" data-value="">保存</button>
</fieldset>
@endforeach

2. 实时赋值data属性的两种方案 #

方案一：输入/选择时实时更新按钮的data属性 #

监听输入框和下拉框的变化事件，每次值改变时更新对应按钮的data属性：

$(function() {
  // 监听输入框输入事件
  $('.target-value').on('input', function() {
    // 找到当前fieldset内的保存按钮
    const $btn = $(this).closest('.target-group').find('.save-btn');
    // 更新data-value（jQuery内部缓存，若要修改DOM属性用attr('data-value', ...)）
    $btn.data('value', $(this).val().trim());
  });

  // 监听下拉框选择事件
  $('.unit').on('change', function() {
    const $btn = $(this).closest('.target-group').find('.save-btn');
    $btn.data('unit', $(this).val());
  });
});

方案二：点击按钮时再获取最新值（更推荐） #

其实不需要提前维护data属性，点击按钮时直接从对应输入框/下拉框拿最新值更可靠，避免中间多次更新的冗余：

$(function() {
  $('.save-btn').on('click', function() {
    // 获取当前按钮所在的fieldset
    const $group = $(this).closest('.target-group');
    // 实时获取对应元素的值
    const targetValue = $group.find('.target-value').val().trim();
    const unitValue = $group.find('.unit').val();

    // 如果一定要赋值到data属性供后续使用
    $(this).data('value', targetValue).data('unit', unitValue);

    // 这里写你的业务逻辑，比如提交AJAX
    // 示例：
    // $.post('/save-target', {
    //   value: targetValue,
    //   unit: unitValue
    // }, function(res) {
    //   // 处理响应
    // });
  });
});

关键说明 #

• 使用closest('.target-group')可以精准定位当前元素所在的fieldset，避免跨组干扰。
• jQuery的data()方法操作的是内部缓存，不会修改DOM上的data-*属性；如果需要在页面源码中看到属性变化，改用attr('data-value', 值)。

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