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

JQuery列表项，当用户分别单击列表项时设置输入字段的列表值

1 个答案: