HTML/PHP/JQUERY - 更改多个 <select> 的“警报”名称

Question

使用 PHP，我将几个数据行从 MySQL 数据库检索到 HTML 表中。 在每一行的末尾，我添加了一个“选择”元素，它显示了一个用户可以修改的属性。 如果有人选择了另一个属性（通过“选择”之一）而不是存储在数据库中的属性，我想更新数据库中的这一行/字段。

下面，“选择”元素之一：

<select class="browser-default" id="FKPRIORITYUSER" name="FKPRIORITYUSER486">
  <option value="99">TBD</option>
  <option value="1">Critical</option>
  <option value="2">High</option>
  <option value="3" selected="selected">Low</option>
</select>

所有这些“选择”元素都是相同的，只是它们的“名称”不同：FKPRIORITYUSER486、FKPRIORITYUSER487 等。

为了通过选择检测值的变化，我使用了一个简单的 jQuery 函数。现在，我只是想“提醒”触发此功能的“选择”组件的名称：

var $select2 = $('select.browser-default');

$select2.on('change', function (e) {
  alert ( $('select').attr('name') );
  alert( e.target.value );
});

但是，问题是这个 alert() 函数只返回名称“FKPRIORITYUSER486”... 如果我单击相应的“选择”就可以了，但是当我更改名为 FKPRIORITYUSER487 的“选择”的值时会失败:)

任何帮助将不胜感激！

Answer 1

首先，元素的 ID 应该是唯一的。您实际上并不需要 ID，但如果您这样做，请执行与 Name 属性相同的操作（使用相同的值）。

现在获取更改的选择名称的代码。您在更改任何选择时调用该函数，但通过硬编码$('select') 提醒第一个选择的名称。您需要使用$(this) 引用来引用已更改的选择，如下所示：

var $select2 = $('select.browser-default');

$select2.on('change', function (e) {
  alert ( $(this).attr('name') );  
});

这是解决当前问题的方法。做你想做的最好的方法是为每个选择分配 data-id。像这样：

<select class="browser-default" data-id="486" name="FKPRIORITYUSER486">

然后像这样读取id

var changedId = $(this).data('id');

并像这样获取选择/更改的值

var changedValue = $(this).val();

然后将数据传递给您的服务器端脚本/代码，以通过发送 id 和更改的值来更新数据库。