jQuery动态创建下拉选择列表：如何唯一标识文本框以实现选项的添加与移除

我明白你的问题了——现在的核心痛点是每个添加的输入框没有和对应的<option>建立绑定关系，导致后续操作没法精准匹配。咱们可以通过给每个输入组和对应的选项添加唯一标识来彻底解决这个问题，具体步骤如下：

1. 引入唯一标识生成机制 #

首先，我们需要一个简单的计数器来生成唯一ID（你也可以用UUID，不过计数器足够满足需求且更直观），在你的JS代码开头定义：

let optionIdCounter = 0; // 全局计数器，用来生成唯一标识

2. 修改添加输入框的代码 #

当用户点击「Add Values」时，给新生成的输入组添加一个唯一的data-option-id属性，把标识关联到输入框的父元素上：

$form_holder.on('click','.add_values', e => {
  optionIdCounter++;
  const uniqueId = `option_${optionIdCounter}`;
  var html = `<div class='clearfix'></div>
              <div class='col-md-4' data-option-id='${uniqueId}'>
                <input type='text' class='form-control add_select_option' name='add_value' ><br>
                <a class='add_option btn btn-default' >Add</a>
                <a class='remove_option btn btn-danger' >Remove</a><br>
              </div>`;
  let $target = $(e.target);
  let $div = $target.closest('.row').find('.append_list');
  $div.append(html);
});

这里我们用计数器生成了类似option_1、option_2的唯一ID，并把它存在输入组的data-option-id属性里，让每个输入组都有了自己的「身份标识」。

3. 修改添加选项的代码 #

点击「Add」按钮时，不仅要把值添加到select里，还要把刚才的唯一ID同步到<option>的data-option-id属性中，这样输入组和选项就形成了一一对应的绑定关系：

$form_holder.on('click','.add_option', e => {
  let $target = $(e.target);
  let $inputGroup = $target.closest('.col-md-4');
  let uniqueId = $inputGroup.data('option-id'); // 获取输入组的唯一ID
  let $valueToAdd = $inputGroup.find('.form-control').val();
  
  if (!$valueToAdd.trim()) return; // 空值不添加，避免无效选项
  
  let $selectList = $target.closest('.row').find('.select-list');
  // 创建选项时绑定唯一ID
  $selectList.append($('<option>', { 
    value: $valueToAdd, 
    text: $valueToAdd,
    'data-option-id': uniqueId // 把ID同步到选项上
  }));
  
  // 可选优化：添加后清空输入框，提升用户体验
  $inputGroup.find('.form-control').val('');
});

4. 实现移除选项的功能 #

现在点击「Remove」按钮时，我们可以通过输入组的唯一ID精准找到对应的<option>并删除，同时删掉输入组本身：

$form_holder.on('click','.remove_option', e => {
  let $target = $(e.target);
  let $inputGroup = $target.closest('.col-md-4');
  let uniqueId = $inputGroup.data('option-id');
  
  // 找到对应ID的选项并删除
  let $selectList = $target.closest('.row').find('.select-list');
  $selectList.find(`option[data-option-id='${uniqueId}']`).remove();
  
  // 删除对应的输入组
  $inputGroup.remove();
});

为什么这样做？ #

• 每个输入组和对应的选项都拥有同一个唯一ID，通过data-*属性存储，完美解决了「区分文本框」的核心需求
• 移除操作时可以精准定位到对应选项，不会误删其他无关选项
• 代码逻辑清晰，和你现有的实现风格保持一致，不需要大幅重构

这样修改后，你就能实现每个输入框对应独立的选项，添加和移除操作都能精准匹配啦！

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