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

关键是在其中一个文本字段获得焦点时设置 a 变量。其余的不会改变。演示

.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组合框。