Jquery not working to add Style to element on One Page Checkout

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
10 năm cách đây
Hi Guys,

I am running into a strange problem...  I am trying to use JQuery to add a reference to the following jqueery plugin  jquery.easydropdown.js that makes the select elements look styled but I am not able to get it to work on all the select fields.

I added it to the website in my own javascript file using the following code:

$(document).ready(function () {
    var $selects = $('select');

    $selects.easyDropDown({
        cutOff: 10,
        onChange: function (selected) {
            // do something
        }
    });
});

This works for most of the select elements but it does not work for the shipping address drop down select on the one page checkout.

Is this because the shipping select on the one page checkout is dynamic html?

I tried to add the following code to get it to apply to "#shipping-address-select"

$(document.body).on('mousemove', '#shipping-address-select', function () {
    var $selectsNow = $('#shipping-address-select');

    $selectsNow.easyDropDown({
        cutOff: 10,
        onChange: function (selected) {
            // do something
        }
    });
});

However, that did not work.  Any ideas?  I am using nopcommerce 3.2

If you have any ideas for me I would greatly appreciate hearing your thoughts.  Thanks!
10 năm cách đây
Tim2376 wrote:
Hi Guys,

I am running into a strange problem...  I am trying to use JQuery to add a reference to the following jqueery plugin  jquery.easydropdown.js that makes the select elements look styled but I am not able to get it to work on all the select fields.

I added it to the website in my own javascript file using the following code:

$(document).ready(function () {
    var $selects = $('select');

    $selects.easyDropDown({
        cutOff: 10,
        onChange: function (selected) {
            // do something
        }
    });
});

This works for most of the select elements but it does not work for the shipping address drop down select on the one page checkout.

Is this because the shipping select on the one page checkout is dynamic html?

I tried to add the following code to get it to apply to "#shipping-address-select"

$(document.body).on('mousemove', '#shipping-address-select', function () {
    var $selectsNow = $('#shipping-address-select');

    $selectsNow.easyDropDown({
        cutOff: 10,
        onChange: function (selected) {
            // do something
        }
    });
});

However, that did not work.  Any ideas?  I am using nopcommerce 3.2

If you have any ideas for me I would greatly appreciate hearing your thoughts.  Thanks!


Hi,

The "shipping-address-select" select control is in the "OpcShippingAddress.cshtml" file (in the "Presentation\Nop.Web\Views\Checkout" folder), so that I think you should put your script in this this in order to make it work :)
10 năm cách đây
Hi,

Thank you so much!  Your solution worked great.  I really appreciate the help.
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.