将多个输入插入选择菜单

Question

我正在尝试使用一个输入字段来填充<select><option> 。 需要注意的是，我想在选择中添加多个输入，但是我很难添加多个。 很难解释，但是流程是我在输入中添加团队名称，然后将其显示在用户/成员的下拉选择中。

这是我目前正在执行的操作：

这将添加多个字段。

    <div class="multi-field-wrapper">
      <div class="multi-fields">
        <div class="multi-field">
          <input type="text" name="teamName" id="teamName">
          <button type="button" class="remove-field">Remove</button>
        </div>
      </div>
        <button type="button" class="add-field">Add field</button>
    </div>

然后，来自字段的输​​入将填充以下字段：

    <label>Select Team</label>
        <select id="teamList">
    </select>

这是这样处理的：

  $('#teamName').on('change', function() {
    var $selectEl = $('#teamList');
    var $dashboardOption = $selectEl.find('.team-name');
    if ($dashboardOption.size()) {
        $dashboardOption.attr('value', $(this).val()).text($(this).val());
    } else {
        $selectEl.append('<option class="team-name" value="' + $(this).val() + '">' + $(this).val() + '</option>');
    }
  });

我的问题是，如何如上所述将多个输入插入选择/选项？ 可能吗？

Answer 1

目前，您的更改事件已绑定到ID为“ teamName”的单个输入元素。 如果要使用多个输入框来执行此功能，则可以使用一个类，以便将事件绑定到所有输入框，如下所示：

HTML：

<input type="text" name="teamName" class="teamInputs">

JS：

$(document).on('change', '.teamInputs', function() {

请注意，我已经使用了委托事件语法，这样，即使在运行此代码时尚不存在更改事件，该更改事件也会在所有带有“ teamInputs”类的输入上触发。