代码之家 › 专栏 › 技术社区 › TSCAmerica.com

在选择中显示文本框的值

jquery

TSCAmerica.com · 技术社区 · 8 年前

我正试图显示选择中文本框的值。例如,如果在 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>

1 回复 | 直到 8 年前

Rory McCrossan Hsm Sharique Hasan 8 年前

为了达到这个目的,你可以 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>