检测隐藏选择元素上的更改事件答案

【问题标题】：Detect change event on hidden select element检测隐藏选择元素上的更改事件
【发布时间】：2019-02-25 05:46:56
【问题描述】：

在产品页面上，客户可以从不同的变体中进行选择。在“选择”元素中，存储了所有变体。该元素被隐藏，不显示。因此，用户可以使用所有花哨的东西（如样本和其他有趣的东西）来选择变体，但实际上它只是一个“选择”元素，用于跟踪正在使用的变体。它的值是变体 id。
我附上了一张图片，以便更清楚地了解发生了什么。

目标：在变体更改时获取变体 ID。

问题：我无法检测到此选择的更改事件元素。

限制：我不允许触摸此代码的 HTML。我只能在运行时在此页面上的 <head> 标记中附加一个 javascript 文件，并且我需要检测该脚本中的 change 事件。

$(document).ready(function(){

 $('body').on('change', "select[name='id']",  function(){

   console.log('here');

 });


});

我可以随时使用下面的代码获得它的价值。

console.log($("select[name='id']").val());

有什么想法说明为什么 change 事件不会被检测到？

【问题讨论】：

您是否尝试过使用 select id 代替？所以，#ProductSelect
id 不断变化……唯一保持不变的属性是name="id"。它遵循 Shopify 主题的约定。
"The fancy things" 可能是通过使用不会触发change 事件的.val 方法设置选择的值。
是的。我也想过。如果他们正在更改值，则必须手动触发更改事件。 trigger('change') 就像这样。而且很可能他们没有这样做。那样的话，就这样结束了吗？
该网站使用shopify。我认为这是主文件：cdn.shopify.com/s/files/1/1715/0827/t/5/assets/…。几个库的巨大捆绑。你为什么不听按钮的点击事件呢？然后就可以得到select事件的对应值了。

标签： javascript jquery html select

【解决方案1】：

根据jQuery 文档，change() 在以编程方式设置时不会触发val()

注意：使用 JavaScript 更改输入元素的值，例如使用 .val()，不会触发事件。

设置val()时需要手动操作

$("select[name='id']").val(354).trigger('change');

编辑[0]：在您的 cmets 了解您的尝试后，我快速浏览了 js。

我发现template 触发了一个自定义事件variantChange

$("#ProductSection--product-template").on("variantChange", function(evt){alert($("select[name='id']").val());});

祝你好运；

【讨论】：

嗯，这很糟糕。我的脚本不负责更改值。以及负责的脚本，可能不会触发更改事件。那么，是不是没救了？？
@awebartisan，我错了，我已经更新了我的答案。如果您无法控制触发事件，则它是您要避免的漏洞。
@awebartisan，我快速查看了您引用的页面，并找到了正在触发的自定义事件。
我不能依赖上述解决方案，因为这些模板名称和 ID 会随着主题而不断变化。只有表单元素“名称属性”和选择“名称”属性保持不变，因为它们是约定的一部分。感谢您的所有努力 :) 非常感谢。

【解决方案2】：

我认为应该知道是什么触发了这种情况，我的意思是，如果在您更改尺寸选择时进行更改，那么在此内部您将获得所需的值，例如：

$(document).on("change","#select1",function(){
  var valuneed = $("#select2").val();
  console.log(valuneed);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="11">size a</option>
<option value="21">size b</option>
</select>

<select id="select2">
<option value="21">value a</option>
<option value="22">value b</option>
</select>

如果第二个选择的更新需要几秒钟（通常），那么您只需添加一个 settimeout

如果不仅仅是触发，那么你：

$(document).on("change","#select1, #selector2, #selector3",function(){

如果您需要，请告诉我。

【讨论】：

你的回答只是让我朝着实现目标的方向前进。 :)

【解决方案3】：

因为目标是获取变体 id 的当前值，所以我就是这样做的。

获取值不是问题，所以当页面加载时，将初始值存储在localStorage中，然后监听表单上的更改事件。幸运的是，更改事件正在表单元素上触发。

        $('body').on('change', 'form[action^="/cart/add"]', function () {

            console.log($('select[name="id"]').val());

        });

将值与之前的值进行比较，看看它是否改变了。如果是，那就做我的事。如果没有，请等待表单上的另一个更改事件。是的，我希望它会长期有效。

谢谢大家！！

【讨论】：