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

Posted 2023-02-16

【中文标题】从文本字段复制值以选择下拉列表[重复]

【英文标题】：Copy value from text field to select dropdown [duplicate]

【发布时间】：2018-01-14 11:09:50

【问题描述】：

我想使用 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>

【问题讨论】：

到目前为止，您使用 jQuery 尝试过什么？请同时发布它的代码。 @HamzaMustafa

我对 jquerey 没有太多想法，$("#ra").change(function() $("#opa").val($(this).val("# a1")); );

我强烈建议您学习 jQuery 的基础知识。以下是一些相同的资源：@​​987654321@

【参考方案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>

【讨论】：

它不工作

@HamzaMustafa 究竟是什么不起作用？控制台有错误？能具体点吗？

当我填写四个输入字段时，我希望下拉列表中有值，这就是我想要的

@HamzaMustafa 这就是上面代码的作用。

@AlexChar 我不知道为什么像你这样的专家以及拥有丰富经验的专家（无论是在行业还是在堆栈溢出中）都在推广这样的问题，而 OP 甚至还没有进行适当的研究在寻找解决方案！

【参考方案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>

【讨论】：

以上代码不起作用，先生

不工作是什么意思，看例子

完美解决方案

@ImranAhmadShahid 谢谢

当我填写输入字段时，我在下拉菜单下什么也没有