Laravel中使用jQuery在编辑弹窗弹出时获取下拉框旧值

我想在编辑弹窗弹出时显示旧数据，但对下拉框选项的显示逻辑搞不清楚，以下是我的代码：

调用弹窗与触发按钮 #

<button
        class="btn text-white d-flex justify-content-center align-items-center text-capitalize btn-update me-2"
        data-bs-title="Edit" data-bs-toggle="modal"
        data-id="{{ $item->id }}" data-bs-target="#edit_modal_users"
        style="background-color: #ff720c;width:50px;height:25px;font-size:12px; font-weight:500;"
        onclick="getDataMember('{{ $item->id }}','{{ $item->group_name }}', '{{ $item->role_name }}', '{{ $item->email }}')">
    Edit
</button>

JavaScript函数 #

function getDataMember(id, group_name, role_name, email) {
        document.getElementById('user_id').value = id;
     
        document.getElementById('edit_department_name').value = group_name;
        document.getElementById('edit_role_name').value = role_name;
        document.getElementById('edit_email').value = email;
    }

弹窗代码 #

<div class="modal fade" id="edit_modal_users" tabindex="-1" role="dialog" aria-labelledby="exampleModalMessageTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header" style="background: #19194b">
        <h6 class="font-weight-bolder text-white" style="font-weight: 600">Edit Member</h6>
        <button type="button" class="btn-close  text-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="card-text mt-4" id="basic-info">
          <div class="card-body pt-0">
            <form onsubmit="updateEmploye(event)">
              <div class="row">
                <input type="hidden" name="test" id="user_id">
                <div class="col-6">
                  <label class="form-label mt-2" style="color: black; font-weight:500">Department</label>
                  <div class="">
                    <select class="form-select " name="edit_department_name" id="edit_department_name">
                      <option value="">Select</option> @foreach ($data['list_department'] as $item_departement) <option value="{{ $item_departement->id }}" selected>
                        {{ $item_departement->group_name }}
                      </option> @endforeach
                    </select>
                  </div>
                </div>
                <div class="col-6">
                  <label class="form-label mt-2" style="color: black; font-weight:500">Role</label>
                  <div class="">
                    <select class="form-select " name="edit_role_name" id="edit_role_name">
                      <option value="">Select</option> @foreach ($data['list_role'] as $item_role) <option value="{{ $item_role->id }}" selected>{{ $item_role->role_name }}
                      </option> @endforeach
                    </select>
                  </div>
                </div>
                <div class="col-6">
                  <label class="form-label mt-2" style="color: black; font-weight:500">Role</label>
                  <div class="">
                    <input type="text" class="form-control" id="edit_email" name="edit_email">
                  </div>
                </div>
              </div>
              <div class="row mt-2 ">
                <div class="d-flex mt-4 justify-content-end mb-0">
                  <div class="mb-0">
                    <button class="btn text-white" data-bs-dismiss="modal" style="background-color: #D42A34">Cancel</button>
                    <button type="sumbit" class="btn text-white" style="background-color: #62ca50">Submit</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请问如何使用jQuery获取下拉框的旧值？

先修正现有代码的核心问题 #

你当前的代码有两个关键错误：

1. 下拉框循环生成的所有option都加了selected属性，这会导致默认选中最后一个选项，直接覆盖你要设置的旧数据
2. 你给下拉框赋值的是group_name和role_name，但下拉框的value是对应数据的ID，不是名称，所以赋值逻辑无效

使用jQuery处理下拉框旧值的具体步骤 #

1. 修改触发按钮的传参逻辑

把原来传递的group_name和role_name换成对应的ID（比如group_id和role_id），因为下拉框的value绑定的是ID，匹配度更高：

<button
        class="btn text-white d-flex justify-content-center align-items-center text-capitalize btn-update me-2"
        data-bs-title="Edit" data-bs-toggle="modal"
        data-id="{{ $item->id }}" data-bs-target="#edit_modal_users"
        style="background-color: #ff720c;width:50px;height:25px;font-size:12px; font-weight:500;"
        onclick="getDataMember('{{ $item->id }}','{{ $item->group_id }}', '{{ $item->role_id }}', '{{ $item->email }}')">
    Edit
</button>

2. 修正弹窗下拉框的selected属性

去掉循环里所有选项的selected，只保留默认空选项的未选中状态：

<!-- 部门下拉框 -->
<select class="form-select " name="edit_department_name" id="edit_department_name">
  <option value="">Select</option> 
  @foreach ($data['list_department'] as $item_departement) 
  <option value="{{ $item_departement->id }}">
    {{ $item_departement->group_name }}
  </option> 
  @endforeach
</select>

<!-- 角色下拉框 -->
<select class="form-select " name="edit_role_name" id="edit_role_name">
  <option value="">Select</option> 
  @foreach ($data['list_role'] as $item_role) 
  <option value="{{ $item_role->id }}">{{ $item_role->role_name }}
  </option> 
  @endforeach
</select>

3. 用jQuery重构getDataMember函数

在设置新值前先获取并存储下拉框的原始旧值，再设置用户的旧数据：

function getDataMember(id, group_id, role_id, email) {
    // 获取下拉框当前的旧值（弹窗打开前的默认值）
    var oldDepartmentVal = $('#edit_department_name').val();
    var oldRoleVal = $('#edit_role_name').val();
    
    // 设置用户的旧数据到弹窗表单
    $('#user_id').val(id);
    $('#edit_department_name').val(group_id);
    $('#edit_role_name').val(role_id);
    $('#edit_email').val(email);
    
    // 把旧值存储到元素的data属性，方便后续随时调用
    $('#edit_department_name').data('old-value', oldDepartmentVal);
    $('#edit_role_name').data('old-value', oldRoleVal);
}

4. 后续获取旧值的方式

如果在提交或其他操作中需要调用下拉框的原始旧值，直接读取存储的data属性即可：

// 获取部门下拉框的旧值
var departmentOldVal = $('#edit_department_name').data('old-value');
// 获取角色下拉框的旧值
var roleOldVal = $('#edit_role_name').data('old-value');

特殊情况处理（必须用名称匹配） #

如果因为业务限制只能用名称匹配下拉框选项，可以用jQuery的:contains选择器，但这种方法容易因为同名选项出错，优先建议用ID匹配：

// 用group_name匹配部门选项
$('#edit_department_name option:contains("'+ group_name +'")').prop('selected', true);
// 用role_name匹配角色选项
$('#edit_role_name option:contains("'+ role_name +'")').prop('selected', true);

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