Noob JS複数の機能を備えたドロップダウンについて

Question

ここでさまざまな場所を見て、私は必要な答えを見つけましたが、すべてのコードを混ぜずに混ぜるのは難しいです。

要するに、いくつかのドロップダウンメニューがあります。 1つのメニューでスパンを更新する必要があります。
同じドロップダウンでは、次のドロップダウンのオプションを変更する必要はありません。
同じドロップダウンでは、WPではなく、ここで機能するdivにイメージをロードする必要があります。

また、私はJSをワードストリームに入れても、単純にうまく動作しません。モデル番号機能は機能しますが、divイメージは機能しません。

彼女のシャワーモデルのドロップダウンは、ハードウェア仕上げドロップダウンのオプションを変更する必要があります。

シャワーモデルも1、2、3の代わりに画像を表示する必要がありますドロップダウン、そして4

はここで、これまでの私のバイオリンだ - それはオンになっているようhttps://jsfiddle.net/1zgoyh3k/47/

はここに私のコードですワードプレス

window.onload=function(){ 

    // Shower Models 
    var list = document.getElementById('ModelSelect'); 
    var tag = document.getElementById('ModelSerial'); 

    list.onchange = function() { 
    ModelSerial.innerHTML = this.value; 
    }; 

    //Shower Model Images 
     $(document).ready(function() { 
    $('.ShowerModel').hide(); 
    $('#ModelSelect').change(function() { 
    $('.ShowerModel').hide(); 
    $('#' + $(this).val()).show(); 
    }); 
}); 

    // Shower Finishes 
    var list = document.getElementById('FinishSelect'); 
    var tag = document.getElementById('Finish'); 

    list.onchange = function() { 
    Finish.innerHTML = this.value; 
    }; 

    // Glass Width 
    var list = document.getElementById('GWidth'); 
    var tag = document.getElementById('GlassWidth'); 

    list.onchange = function() { 
    GlassWidth.innerHTML = this.value; 
    }; 

    // Glass Height 
    var list = document.getElementById('GHeight'); 
    var tag = document.getElementById('GlassHeight'); 

    list.onchange = function() { 
    GlassHeight.innerHTML = this.value; 
    }; 

    // Glass Type 
    var list = document.getElementById('GlassType'); 
    var tag = document.getElementById('Glass'); 

    list.onchange = function() { 
    Glass.innerHTML = this.value; 
    }; 

} 

    <h2> 
Select Shower Model 
</h2> 
<select name="ModelSelect" id="ModelSelect"> 
    <option value="">Select Shower Model</option> 
    <option value="LP204">LP204</option> 
    <option value="JP402">JP402</option> 
    <option value="FP209">FP209</option> 
    <option value="JP206">JP206</option> 
</select> 
<br> 
<br> 
<h2> 
Select Hardware Finish 
</h2> 
<select name="FinishSelect" id="FinishSelect"> 
    <option value="">Select Hardware Finish</option> 
    <option value="PS">Polished Stainless</option> 
    <option value="BS">Brushed Stainless</option> 
    <option value="OB">Oil Rubbed Bronze</option> 
    <option value="BR">Polished Brass</option> 
    <option value="PN">Polished Nickel</option> 
    <option value="BN">Brushed Nickel</option> 
</select> 
<br> 
<br> 
<h2> 
Enter Glass Size 
</h2> Width in Inches: 
<input type="text" name="Width" id="GWidth"> 
<br> 
<br> Height in Inches: 
<input type="text" name="Height" id="GHeight"> 
<br> 
<br> 
<h2> 
Select Glass Type 
</h2> 
<select name="GlassType" id="GlassType"> 
    <option value="">Select Option</option> 
    <option value="CL">Clear</option> 
    <option value="FR">Frosted</option> 
    <option value="LI">Low Iron</option> 
    <option value="LF">Low Iron Frosted</option> 
    <option value="CT">Clear Textured</option> 
    <option value="LT">Low Iron Textured</option> 
</select> 
<br> 
<br> 
<h2> 
Model Image 
</h2> 
<div id="LP204">11</div> 
<div id="JP402">2</div> 
<div id="FP209">3</div> 
<div id="JP206">4</div> 
<br> 
<br> 
<h2> 
Model Number 
</h2> 
<span id="ModelSerial"></span><span id="Finish"></span><span id="GlassWidth"></span><span id="GlassHeight"></span><span id="Glass"></span> 

Answer 1

答えを見つけました。私が持っているコードは正しいです、私はちょうど開いた：

jQuery(document).ready(function($) { 

今はそれが動作します。