jQuery onchange调用函数方法及Magento2.2.1下拉框函数报错求助

嘿，我来帮你搞定这两个问题！

在jQuery里处理下拉框的change事件有几种常用方式，根据你的元素是否是静态生成的来选择：

• 静态元素直接绑定
  如果下拉框是页面加载时就存在的，用这两种方式都可以：

// 方式1：用.change()快捷方法
$('#your-select-id').change(function() {
  // 直接写逻辑，或者调用你的函数
  getOptions();
});

// 方式2：用.on('change')绑定，兼容性更好
$('#your-select-id').on('change', function() {
  getOptions();
});

• 动态生成的元素用事件委托
  如果下拉框是后来通过JS动态添加到页面的，得把事件绑定到它的父元素上（父元素要一开始就存在）：

// 比如父容器是#parent-wrap
$('#parent-wrap').on('change', '.your-select-class', function() {
  getOptions();
});

你遇到的这个错误，本质是浏览器找不到abc这个对象/函数，大概率是因为Magento的JS模块化机制，或者你的函数没暴露到全局作用域。给你几个靠谱的解决方案：

方案1：把函数挂载到全局window对象 #

Magento默认的JS是模块化的，直接写的函数在HTML的onchange属性里访问不到，所以可以把abc对象挂到window上：

// 在test.phtml的<script>标签里写这段
window.abc = {
  getOptions: function() {
    // 这里写你的逻辑，比如获取选中属性值，请求选项
    var selectedAttr = $('#attributes-select').val();
    // 举个AJAX获取选项的例子
    $.ajax({
      url: '<?php echo $block->getUrl('your/controller/path'); ?>',
      data: {attribute_id: selectedAttr},
      type: 'POST',
      success: function(response) {
        // 更新第二个下拉框的内容
        $('#options-select').html(response);
      }
    });
  }
};

然后你的下拉框代码就可以正常调用了：

<select id="attributes-select" onchange="abc.getOptions()">
  <!-- 你的属性选项 -->
</select>

方案2：改用jQuery绑定事件（更推荐，符合Magento规范） #

不建议用HTML属性里的onchange，改用jQuery绑定事件更优雅，还能避免全局作用域的问题。在test.phtml里这么写：

<script type="text/javascript">
// 引入jQuery，Magento默认会加载它
require(['jquery'], function($) {
  $(document).ready(function() {
    // 给第一个下拉框绑定change事件
    $('#attributes-select').on('change', function() {
      getOptions();
    });

    // 定义getOptions函数
    function getOptions() {
      var selectedAttr = $('#attributes-select').val();
      // 发起AJAX请求获取选项
      $.ajax({
        url: '<?php echo $block->getUrl('yourmodule/option/load'); ?>',
        data: {attribute_id: selectedAttr},
        type: 'POST',
        dataType: 'html',
        success: function(data) {
          $('#options-select').html(data);
        }
      });
    }
  });
});
</script>

这时候你的下拉框就不需要onchange属性了：

<select id="attributes-select">
  <!-- 属性选项 -->
</select>
<select id="options-select">
  <!-- 初始空或者默认选项 -->
</select>

方案3：用RequireJS模块管理你的函数 #

如果你的逻辑比较复杂，建议把abc做成RequireJS模块。先在你的模块里创建js/abc.js：

define([], function() {
  return {
    getOptions: function() {
      // 你的逻辑代码
    }
  };
});

然后在test.phtml里引入这个模块：

<script type="text/javascript">
require(['jquery', 'Vendor_Module/js/abc'], function($, abc) {
  $(document).ready(function() {
    $('#attributes-select').on('change', function() {
      abc.getOptions();
    });
  });
});
</script>

最后要注意的几个小细节 #

• 确保jQuery的$可用，有时候Magento会把$映射成jQuery，所以如果报错$ is not defined，就换成jQuery。
• 修改完代码后一定要清空Magento的缓存（页面缓存、JS合并缓存都要清），不然修改可能不生效。
• 检查你的test.phtml是否在布局文件里正确引用了，确保模板能被加载到页面上。

内容的提问来源于stack exchange，提问作者Sri