从文本字段复制值以选择下拉列表

Question

我想使用jQuery将输入字段的值复制到我的下拉列表中。 我在这里有四个选项字段和各自的ID，当用户在下面的字段中输入任何文本时，我的下拉菜单实时获取值。

我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>option a</label>
<input type="text" id="opa" size="30" class="text-input" />
<br>
<label>option b</label>
<input type="text" id="opb" size="30" class="text-input" />
<br>
<label>option c</label>
<input type="text" id="opc" size="30" class="text-input" />
<br>
<label>option d</label>
<input type="text" id="opd" size="30" class="text-input" />
<br>


<input type="text" id="a1" name="">

<select name="ra" class="form-control" id="ra">
  <option value="" >---Select right option ---</option>
  <option id="a" ></option>
  <option id="b" ></option>
  <option id="c" ></option>
  <option id="d"  ></option>
</select>

Answer 1

您可以使用以下代码来实现您的目标。

$("input[id^=op]").keyup(function() {
  var id = $(this).attr("id").replace("op","");
  $("#ra #" + id).val($(this).val()).text($(this).val());
})

注意在我按下提交答案之前，我没有注意到它被标记为重复，但我还是会离开它

＆＃13;

＆＃13;

$("input[id^=op]").keyup(function() {
  var id = $(this).attr("id").replace("op","");
  $("#ra #" + id).val($(this).val()).text($(this).val());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>option a</label>
<input type="text" id="opa" size="30"  class="text-input" />
<br>
<label>option b</label>
<input type="text" id="opb" size="30"  class="text-input" />
<br>
<label>option c</label>
<input type="text" id="opc" size="30"  class="text-input" />
<br>
<label>option d</label>
<input type="text" id="opd" size="30"  class="text-input" />
<br>


<select name="ra" class="form-control" id="ra">
              <option value="" >---Select right option ---</option>
              <option id="a" ></option>
              <option id="b" ></option>
              <option id="c" ></option>
              <option id="d"  ></option>
             </select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我创建了以下小提琴来更新keyup事件的选项文本和值：

$('input').on('keyup', function() {
  var id = $(this).attr('id');
  $('#' + id[id.length - 1]).text(this.value);
  $('#' + id[id.length - 1]).val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>option a</label>
<input type="text" id="opa" size="30" class="text-input" />
<br>
<label>option b</label>
<input type="text" id="opb" size="30" class="text-input" />
<br>
<label>option c</label>
<input type="text" id="opc" size="30" class="text-input" />
<br>
<label>option d</label>
<input type="text" id="opd" size="30" class="text-input" />
<br>


<input type="text" id="a1" name="">

<select name="ra" class="form-control" id="ra">
  <option value="" >---Select right option ---</option>
  <option id="a" ></option>
  <option id="b" ></option>
  <option id="c" ></option>
  <option id="d"  ></option>
</select>