我有两个输入文本字段。当用户分别单击它时,我需要从动态列表项中传递值。
用户故事: 当用户选择第一个输入文本字段并单击列表项时,它应该将所选列表项的值传递给第一个输入文本字段。 和 当用户选择第二个输入文本字段并单击列表项时,它应该将所选列表项的值传递给第二个输入字段。
这是我的代码: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>');
}
});
非常感谢您的帮助和建议。
最佳答案
关键是在其中一个文本字段获得焦点时设置变量。其余不变。 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 组合框。
关于javascript - JQuery列表项,分别设置用户点击列表项时输入框的列表值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48291189/