在 jquery 中处理多个 id 并仅更新相同 id 的输入

Posted 2023-05-09

【中文标题】在 jquery 中处理多个 id 并仅更新相同 id 的输入

【英文标题】：Handling multiple id in jquery and update only input of same id

【发布时间】：2016-08-21 09:14:45

【问题描述】：

这是我用于自动完成的代码（从 php db 我得到 id 和 name）

<input type="text" id="rubrica_1"><input type="hidden" id="value_1">
<input type="text" id="rubrica_2"><input type="hidden" id="value_2">
<input type="text" id="rubrica_3"><input type="hidden" id="value_3">

那么脚本就是

  $( '[id^=rubrica_]' ).autocomplete(
    source:'content/json/autocomplete.php', 
    minLength:2,
    select: function(event,ui)
      $( '[id^=value_]').val(ui.item.id);
    
  );   

使用此解决方案，我使用相同的值更新所有 value_1、value_2 和 value_3...

【问题讨论】：

你能改变html吗？如果可以的话，我会添加一个data- 属性来配对它们，例如<input type="text" id="rubrica_1" data-in="1"><input type="hidden" id="value_1" data-in="1"> 然后你的最后一行可以是$("input:hidden[data-in='" + $(this).data("in") + "']").val(...

【参考方案1】：

您可以在引用目标输入元素的选择函数中使用$(this)。与下一个选择器一起定位下一个隐藏输入：

$( '[id^=rubrica_]' ).autocomplete(
source:'content/json/autocomplete.php', 
minLength:2,
select: function(event,ui)
   $(this).next().val(ui.item.id);
 
);   

【参考方案2】：

您可以使用类为相同的元素分配值

<input type="text" id="rubrica_1"><input class="same_id" type="hidden" id="value_1">
<input type="text" id="rubrica_2"><input class="same_id" type="hidden" id="value_2">
<input type="text" id="rubrica_3"><input class="same_id" type="hidden" id="value_3">

$( '[id^=rubrica_]' ).autocomplete(
source:'content/json/autocomplete.php', 
minLength:2,
select: function(event,ui)
  $( '.same_id').val(ui.item.id);

 );   

【讨论】：

这会影响所有隐藏的输入元素。