将”OnChange”添加到woocommerce选择元素的正确方法？

我需要在下面的选择中添加onchange =” myFunction()”。但是, 下面的选择来自woocommerce, 我希望它在更新主题时保留onchange =” myFunction()”。

实现此目标的最佳方法是什么？ (我应该进入woocommerce并直接使用select编辑文件吗？)

<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">

<option value="">Color</option>
<option value="black" class="attached enabled">Black</option>
<option value="brown" class="attached enabled">Brown</option>

</select>

或者我可以使用javacript将onchange =” myFunction()”添加到<select id =” pa_color”>中, 以便在更新主题时保留它吗？

#1

如果你想添加一些自定义js功能并在更新或更改主题后保留它, 可以创建一个插件, 假设你将其命名为my-awesome-plugin.php并将此文件转储到/ wp-content / plugins / my-很棒的插件文件夹。

插件文件可以包含以下内容：

<?php
/*
Plugin Name: My Awesome Plugin
Plugin URI: http://example.com
Description: A plugin that loads an awesome js file.
Author: John Doe
Author URI: http://example.com
version: 1.00
*/

add_action('wp_enqueue_scripts', 'my_awesome_plugin_load_js');

function my_awesome_plugin_load_js() {
    wp_enqueue_script( 'my-awesome-js', plugins_url( '/js/my-awesome-js.js', __FILE__ ), array('jquery'));
}

然后在你的插件文件夹中创建一个/ js /文件夹, 并添加一个文件my-awesome-js.js

激活插件时, 它将加载my-awesome-js.js文件。

在此文件中, 你可以添加你的侦听器。

jQuery(function ($) {
  'use strict';


    $('#pa_color').change(function() {
       // here is your value and you can do whatever you want to do with it.
       var value = $(this).val();

    });

});