将多个输入插入选择菜单

时间:2017-01-13 10:47:29

标签: jquery html

我正在尝试使用一个输入字段来填充<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中插入多个输入,如上所述?它甚至可能吗?

1 个答案:

答案 0 :(得分:1)

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

HTML:

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

JS:

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

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