admin管理员组

文章数量:1326631

On a product page, a customer can select from different variants. In a "select" element, all the variants are stored. This element is hidden with display none. So, users can select variants using all fancy things like swatches and other fun stuff but under the hood its just a "select" element which keeps track of which variant is being used. Its value is variant id.
I am attaching an image to be more clear on what's going on.



Goal: Get the variant id on change of variant.

Problem: I am unable to detect the change event on this select element.

Limitations: I am not allowed to touch the HTML of this code. I can only append a javascript file at run time on this page in <head> tag and I need to detect the change event in that script.

$(document).ready(function(){

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

   console.log('here');

 });


});

I can get its value just fine with below code at any time I want.

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

Any ideas that why change event won't be detected?

On a product page, a customer can select from different variants. In a "select" element, all the variants are stored. This element is hidden with display none. So, users can select variants using all fancy things like swatches and other fun stuff but under the hood its just a "select" element which keeps track of which variant is being used. Its value is variant id.
I am attaching an image to be more clear on what's going on.



Goal: Get the variant id on change of variant.

Problem: I am unable to detect the change event on this select element.

Limitations: I am not allowed to touch the HTML of this code. I can only append a javascript file at run time on this page in <head> tag and I need to detect the change event in that script.

$(document).ready(function(){

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

   console.log('here');

 });


});

I can get its value just fine with below code at any time I want.

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

Any ideas that why change event won't be detected?

  • javascript
  • jquery
  • html
  • select
Share Improve this question asked Sep 20, 2018 at 20:55 awebartisanawebartisan 1,5141 gold badge16 silver badges28 bronze badges 12
  • Have you tried using the select id instead? So, #ProductSelect – Jean Paul Commented Sep 20, 2018 at 21:01
  • id keeps changing... the only attribute that remains same is name="id". Its a convention followed by Shopify themes. – awebartisan Commented Sep 20, 2018 at 21:03
  • "The fancy things" probably set the select's value by using the .val method which doesn't trigger change event. – Ram Commented Sep 20, 2018 at 21:03
  • Yes. I thought of same. If they are changing the value, they have to manually trigger the change event. trigger('change') like so. and most probably they are not doing it. In that case, is it the end of it? – awebartisan Commented Sep 20, 2018 at 21:05
  • 1 The site uses shopify. I think this is the main file: cdn.shopify./s/files/1/1715/0827/t/5/assets/…. A huge bundle of several libraries. Why don't you listen to click event of the buttons instead? Then you can get the corresponding value of the select event. – Ram Commented Sep 20, 2018 at 21:41
 |  Show 7 more ments

3 Answers 3

Reset to default 4

As per the jQuery documentation change() is not fired when val() is set programmatically

Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.

You need to do it manually when you set val()

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

Edit[0]: After your ments on what you were trying to do I took a quick look at the js.

I found that the template fires a custom event variantChange

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

Good Luck;

Since the goal was to get the current value of variant id, here is how I got to that.

Getting the value is not a problem, so when page loads, store the initial value in localStorage then listen to change event on form. Thankfully, change event is triggering on Form element.

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

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

        });

Compare the value with previous value and see if its changed. If yes, then do my thing. If not, wait for another change event on form. Yeah, I hope it will work for the long run.

Thank you all !!

I think that should know what triggers this, I mean if change when you change the select of the sizes then inside this you get the value that you need, for example:

$(document).on("change","#select1",function(){
  var valuneed = $("#select2").val();
  console.log(valuneed);
});
<script src="https://ajax.googleapis./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>

And if the update of the second select takes a seconds (is the usual) then you just add a settimeout

If there is more than just on trigger, then you:

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

Let me know if this is what you need.

本文标签： javascriptDetect change event on hidden select elementStack Overflow

版权声明：本文标题：javascript - Detect change event on hidden select element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742206186a2432855.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。