javascript - JQuery列表项，分别设置用户点击列表项时输入框的列表值

Question

我有两个输入文本字段。当用户分别单击它时，我需要从动态列表项中传递值。

用户故事:当用户选择第一个输入文本字段并单击列表项时，它应该将所选列表项的值传递给第一个输入文本字段。和当用户选择第二个输入文本字段并单击列表项时，它应该将所选列表项的值传递给第二个输入字段。

这是我的代码:https://jsfiddle.net/shekhar123/uork6yhu/24/

<form action="/users" method="post">
  <div>
  <input type="text" id="firstInputField" palceholder="select the listitem" />
  <input type="text" id="secondtInputField" palceholder="select the list item" />
</div>
<h3>dynamic list item</h3>
<div>
    <ul class="list-group text-center" id="ulItem"></ul>
</div>


//Jquery file

var listItem = [{
    name: "name1"
   }, {
   name: "name2"
   }, {
   name: "name3"
}];
$(document).ready(function() {
  for (var prop in listItem) {
    $("#ulItem").append('<li class="list-group-item list-group-item-action">' + listItem[prop].name + '</li>');
  }
});

非常感谢您的帮助和建议。

Answer 1

关键是在其中一个文本字段获得焦点时设置变量。其余不变。 DEMO

HTML:

<input id="input1" class="fields">
<input id="input2" class="fields">
<ul id="mylist">
  <li>1st value</li>
  <li>2nd value</li>
  <li>3rd value</li>
  <li>4th value</li>
</ul>

JS:

let selectedField = null;

$(".fields").on("focus", function() {selectedField = $(document.activeElement);});
$("#mylist li").on("click", function() {
  if (selectedField != null)
    selectedField.val($(this).html());
});

这有点受限，尤其是当有其他输入可见时，您应该在它们获得焦点时再次为其重置变量。我个人更喜欢下拉菜单 AKA 组合框。