在选择中显示文本框的值

用户580950

我试图在选择中显示文本框的值。例如，如果您在Chairperson、President或VicePresident文本字段中键入任何内容，则这些文本框的值应作为选项单独显示在select.

我尝试了以下但它不起作用。

$(document).ready(function() {
  $("#Chairperson_change").change(function() {
    document.getElementById("dropdown_change").value = document.getElementById("Signatories").value;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Chairperson: <input name="Chairperson" type="text" maxlength="50" id="Chairperson_change" style="width: 665px; padding:0px; z-index: 2; position: absolute;" /><br> 
President: <input name="President" type="text" maxlength="50" style="width: 665px; padding:0px; z-index: 2; position: absolute;"
/><br> 
VicePresident: <input name="VicePresident" type="text" maxlength="50" style="width: 665px; padding:0px; z-index: 2; position: absolute;" /><br>

<select id="dropdown_change"><br>
  <option value="">Options here</option>
</select>

罗里·麦克罗森

为此，您可以挂钩input文本框的事件。然后你可以option为每个文本框创建新元素（基于它的id），或者如果它已经存在则更新一个。试试这个：

$(function() {
  $(".position").on('input', function() {
    var $option = $(`#dropdown_change option[data-pos="${this.id}"]`);
    if (!$option.length)
      $option = $(`<option data-pos="${this.id}" />`);

    $option.text(this.value).val(this.value).appendTo('#dropdown_change');
  });
});

.position {
  width: 665px;
  padding: 0px;
  z-index: 2;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Chairperson: <input name="Chairperson" id="chair" type="text" maxlength="50" class="position" /><br /> 
President: <input name="President" id="pres" type="text" maxlength="50" class="position" /><br /> 
VicePresident: <input name="VicePresident" id="vice" type="text" maxlength="50" class="position" /><br />

<select id="dropdown_change">
  <option value="">Options here</option>
</select>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。