Laravel实现：选中下拉选项后禁用对应选项值

我来帮你搞定这个需求——让选中的语言在其他下拉框里不能再选，新增的行也自动同步这个逻辑。咱们一步步调整代码：

1. 优化初始下拉框的HTML渲染 #

首先，在渲染初始语言选项时，咱们把固定ID改成类选择器，方便后续批量操作，同时保留清晰的选项值标识：

<td class="language-select-cell">
  <select {{ !$canEdit ? 'readonly' : '' }} class="form-control form-select language-select" 
          id="{{ 'resource_profile_language_'.$index }}" 
          name="{{ 'resource_profile_language_'.$index }}" 
          placeholder="Language">
    @foreach($languages as $language)
      <option {{ ($language->name == $resourceProfileLanguage->language->name) ? 'selected' : '' }} 
              value="{{ $language->value }}">
        {{ $language->name }}
      </option>
    @endforeach
  </select>
</td>

2. 编写通用的禁用重复选项函数 #

写一个JS函数，专门处理所有下拉框的选项禁用逻辑：收集已选中的语言值，然后遍历每个下拉框，禁用那些已经被其他下拉选中的选项（排除自身当前选中值）：

function disableSelectedLanguages() {
  // 收集所有已选中的非空语言值
  const selectedValues = $('.language-select')
    .map(function() { return $(this).val(); })
    .get()
    .filter(val => val !== '');

  // 遍历每个下拉框处理选项状态
  $('.language-select').each(function() {
    const currentSelect = $(this);
    const currentValue = currentSelect.val();

    currentSelect.find('option').each(function() {
      const optionValue = $(this).val();
      // 已被其他下拉选中且不是自身当前值，就禁用
      if (selectedValues.includes(optionValue) && optionValue !== currentValue) {
        $(this).prop('disabled', true);
      } else {
        $(this).prop('disabled', false);
      }
    });
  });
}

3. 修改新增行函数，同步禁用逻辑 #

原来的addNewLanguage有语法问题，咱们调整后确保新增的下拉框能绑定事件、清空选中状态，并且立即触发禁用逻辑：

function addNewLanguage() {
  const count = $('#resource_profile_language_table').children('tr').length;
  // 克隆第一个下拉框作为模板
  const selectTemplate = $('.language-select').first().clone();
  
  // 设置新下拉框的id和name
  const newId = `resource_profile_language_${count}`;
  const newName = `resource_profile_language_${count}`;
  selectTemplate.attr('id', newId).attr('name', newName);
  // 清空克隆后的选中状态
  selectTemplate.val('');

  // 创建新行并添加到表格
  const newTr = $('<tr>');
  const newTd = $('<td>').addClass('language-select-cell').append(selectTemplate);
  newTr.append(newTd);
  $('#resource_profile_language_table').append(newTr);

  // 给新下拉框绑定change事件
  selectTemplate.on('change', disableSelectedLanguages);
  
  // 新增后立即更新禁用状态
  disableSelectedLanguages();
}

4. 页面初始化时触发禁用逻辑 #

在页面加载完成后，初始化事件绑定和禁用状态，处理已有的选中项：

$(document).ready(function() {
  // 给所有初始下拉框绑定change事件
  $('.language-select').on('change', disableSelectedLanguages);
  // 初始化禁用状态
  disableSelectedLanguages();
});

逻辑说明 #

• 每次下拉框选中变化时，都会重新收集所有已选值，实时更新所有下拉框的选项禁用状态
• 新增行时，克隆模板并清空选中状态，避免继承原有的选中值，同时绑定事件确保同步逻辑
• 用类选择器代替固定ID，彻底解决新增行时的ID重复问题

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