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>');
    }
  });

我的问题是，如何在select / option中插入多个输入，如上所述？它甚至可能吗？

Answer 1

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

HTML：

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

JS：

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

请注意，我使用了委托事件语法，因此即使在运行此代码时它们尚不存在，也会在所有带有“teamInputs”类的输入上触发change事件。

将多个输入插入选择菜单

1 个答案: