Javascript jQuery就绪函数工作不正常

基本上，我有两张图片，下面我有一个选择，5个选择，每个都有1-5的值。我想根据我的选择更改图片

test2.php

<?php
                        echo "<form action='./test2.php' method='post'>
                            <select id='tier' name='tier' style='width:100%;'>
                                <option value='1'>Bronze</option>
                                <option value='2'>Silver</option>
                                <option value='3'>Gold</option>
                                <option value='4'>Platinum</option>
                                <option value='5'>Diamond</option>
                            </select>
                            <select name='division' style='width:100%;'>
                                <option value='1'>I</option>
                                <option value='2'>II</option>
                                <option value='3'>III</option>
                                <option value='4'>IV</option>
                                <option value='5'>V</option>
                            </select>
                            <select name='lp' style='width:100%;'>
                                <option value='1'>0-20</option>
                                <option value='2'>21-40</option>
                                <option value='3'>41-60</option>
                                <option value='4'>61-80</option>
                                <option value='5'>81-100</option>
                            </select>
                            <input type='hidden' name='product_id' value='1' />
                            <input type='submit' name='add_to_cart' value='Add to cart' style='width:206%;'/>
                  </div>
                </div>
              </div>";

              echo '<div class="col-md-3 col-sm-6" style="width:50%;">
                <div>
                  <div class="item-icon">
                    <img name="postTier" id="postTier" src="images/bronze_rank.png" style="width:100%"></img>
                    <p style="line-height: 60px;">Your finished division</p>
                  </div>
                  <div class="item-details">';
                            echo "<select name='post_tier' style='width:100%;'>
                                <option value='1'>Bronze</option>
                                <option value='2'>Silver</option>
                                <option value='3'>Gold</option>
                                <option value='4'>Platinum</option>
                                <option value='5'>Diamond</option>
                            </select>
                            <select name='post_division' style='width:100%;'>
                                <option value='1'>I</option>
                                <option value='2'>II</option>
                                <option value='3'>III</option>
                                <option value='4'>IV</option>
                                <option value='5'>V</option>
                            </select>
                        </form>";
                        ?>

---

所以首先用虚拟数据检查解决方案：

我粘贴了一些javascript来解决您的问题，我对您的脚本做了一些简化，您当然可以进一步改进。还要检查代码内部的注释，它们是最有用的。你的代码有很多问题

首先，您需要更改您缺少id的post_层的选择：

<select name='post_tier' id="post_tier" style='width:100%;'>

您是否在switch语句之前尝试了
console.log（$（this.val（））
，以查看其中有什么内容？@WashingtonGuedes问题是该函数从未被调用。因此，在我在switch语句之前将其登录到控制台后，不会显示任何内容=即使我更改了选项，该函数也不会被调用。@WashingtonGuedes尝试了它，但它不起作用。您真的应该
echo
所有html吗？难道你不能像普通的html那样编写它，而仅仅使用php在DOM中编写内容吗？我想这会解决你的问题problem@WashingtonGuedes我没有回显我所有的HTML，我只是回显我显示的HTML，因为我认为这是必要的，因为我使用PHP在使用submit时从选项中获取信息。按下按钮后，我立即将它们存储到$\u会话变量中。嘿@pegla谢谢你的帮助，你介意查看我的新图片吗？因为即使你的代码片段工作正常，似乎什么都没有发生。谢谢。custom.min.js中的第6行是什么？看起来您遇到了问题，可能是您没有像本例中一样初始化变量。特别是WOW变量。我正在使用一个模板，我将索引文件从.html更改为.php，并对其进行了一些修改，在我的更改之后，WOW.min.js导致滚动出现问题。我不能用鼠标滚轮或点击鼠标中键向下或向上滚动。我尝试添加它，并注意到它修复了$（文档）内容的问题。我不知道如何解决此滚动问题。首先尝试从wow.min.js开始逐个删除脚本，然后删除custom.min.js，然后检查脚本是否正常工作，然后尝试逐个添加脚本并解决问题。如果没有完整的源代码，我无法为您解决所有问题。您应该尝试阅读您使用的脚本的文档（wow和custom），深入研究javascript，在线查找一些教程，您可能会找到自己的解决方案。
 <!-- Include jQuery Js -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="assets/js/jquery-1.11.2.min.js"><\/script>')</script>
  <script src="assets/js/wow.min.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <!-- Gmap3.js For Static Maps -->
  <script src="assets/js/gmap3.js"></script>
  <!-- Include Waypoint Js -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
  <!-- Include Ajax MailChimp Js -->
  <script src="assets/js/jquery.ajaxchimp.min.js"></script>
    <!-- Include Custom Js </-->
  <script src="assets/js/custom.min.js"></script>

  (function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)?a["on"+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,"animationend",this.resetAnimation),this.util().addEvent(a,"oanimationend",this.resetAnimation),this.util().addEvent(a,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(a,"MSAnimationEnd",this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf("animationend")>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,"").trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[""+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue("-"+i+"-"+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);

<select name='post_tier' id="post_tier" style='width:100%;'>

    $(document).ready(function(){
    // initialize variables
   var newsrc, imgId;
   // you can add both ids in one change, but you're missing id in html select
   $("#tier, #post_tier").change(function(){
  // this is simple string check of id
  console.log($(this).attr('id'))
    if($(this).attr('id')==="tier"){
     imgId="#preTier";
  }else{
     imgId="#postTier";
  }
   // you need parseInt because your .val() numbers are actually strings
    switch(parseInt($(this).val())) {
            // you don't have value of 0 but you have value of 5
        case 5:
           newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
            break;
        case 1:
            newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png';
            break;
        case 2:
           newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png';
            break;
        case 3:
            newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/cat.png';
            break;
        case 4:
           newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/peppers.png';
            break;
    }
     // just take that id and add newsrc
     $(imgId).attr("src",newsrc);

    });

    });