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

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

我创建了以下小提琴来更新 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>

Answer 2

您可以使用下面的代码来实现您想要的。

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

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

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

<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>