Javascript jQuery只需要根据其他字段中的值自动填充一个输入字段（行）（自动完成）；所有其他字段必须保持不变

此脚本根据城市自动填充州和zip

有一行id为id=“city”。如果我想要额外的行，我必须使用id=“city1”、id=“city2”等

在javascript代码中，可以使用

$(this).closest(".myForm").find("[id^=state]") etc...

$（“#city”）.val（ui.item.city）

$（“#city1”）.val（ui.item.city1）

这是不好的，如果我有很多行

所以我试着改变。下面是更改代码

$(document).ready(function(){
var ac_config = {
source: "__demo_cities.php",
select: function(event, ui){
$('[id^="city"]').val(ui.item.city);
$('[id^="state"]').val(ui.item.state);
$('[id^="zip"]').val(ui.item.zip);
},
minLength:1
};
$('[id^="city"]').autocomplete(ac_config);
});

HTML

您使用的
[id^=“city”]
选择器意味着“任何以city开头的内容”，因此它也会影响
city1
。其他人也一样

我会将它们包装在另一个元素中，类似这样：

<span class="myForm">
  <input type="text" name="city[]" id="city" value="" />
  <input type="text" name="state[]" id="state" value="" />
  <input type="text" name="zip[]" id="zip" value="" />
</span>
<span class="myForm">
  <br>
  <input type="text" name="city[]" id="city1" value="" />
  <input type="text" name="state[]" id="state1" value="" />
  <input type="text" name="zip[]" id="zip1" value="" />
</span>

我会将类分配给您的输入，按类选择它们比按ID中的子字符串选择更快：

HTML

非常感谢。不幸的是，类不能用于我的情况。因为，我需要的类名，比如city、city1、city2等等。您知道，您可以为HTML元素分配几个类，而不是“city”，为此您可以使用“完全不同的东西”？您的意思是class=“city city\u otherclass”。我不知道。。。非常感谢。Will tryWell，重复两次“城市”不是一件好事，但除此之外，你有了一个想法。我是说城市是另一个班级。由于下划线符号下面的行不可见，因此将代码更改为$（this）.closest（“.myForm”）.find（“#city”）.val（ui.item.city）$（this.closest（“.myForm”）.find（“#state”）.val（ui.item.state）$（this.closest（“.myForm”）.find（“#zip”）.val（ui.item.zip）；但是如何处理$（'[id^=“city”]'）。自动完成（ac_config）？现在只有第一行可以工作。如果$（'[id^=“city”]'）。自动完成（ac_配置）；更改为$（this.closest（.myForm”）.find（“#city”）.autocomplete（ac#U配置）；当然，你也需要更改HTML。另外，将代码保留为
[id^=city]
，而不是
#city
。我修正了答案。
<span class="myForm">
  <input type="text" name="city[]" id="city" value="" />
  <input type="text" name="state[]" id="state" value="" />
  <input type="text" name="zip[]" id="zip" value="" />
</span>
<span class="myForm">
  <br>
  <input type="text" name="city[]" id="city1" value="" />
  <input type="text" name="state[]" id="state1" value="" />
  <input type="text" name="zip[]" id="zip1" value="" />
</span>

$(this).closest(".myForm").find("[id^=state]") etc...

<input type="text" class="city" name="city[]" id="city0" value="" />
<input type="text" class="state" name="state[]" id="state0" value="" />
<input type="text" class="zip" name="zip[]" id="zip0" value="" />

<br>
<input type="text" class="city" name="city[]" id="city1" value="" />
<input type="text" class="state" name="state[]" id="state1" value="" />
<input type="text" class="zip" name="zip[]" id="zip1" value="" />

$( ".city" ).change(function(e) {
var anIDString=this.id;
anIDString = anIDString.replace('city','zip');
$('#'+anIDString).val('This one changed!');
}
);