Question

在看了这里和其他各个地方之后，我找到了我需要的单个答案，但是我很难混合所有代码而不会崩溃。

简而言之，我有一些下拉菜单。一个菜单需要更新跨度，检查同样的下拉需要改变下面的下拉选项，nope 同样的下拉需要在div中加载图像，在此处起作用，而不是在WP上。

此外，当我将JS放入wordstream时，它根本不能正常工作。型号功能有效，但不是div图像。

她淋浴模型下拉应该改变硬件完成下拉选项。

淋浴模型下拉也应显示图像代替1,2,3和4.

到目前为止，这是我的小提琴 - https://jsfiddle.net/1zgoyh3k/47/

这是我在Wordpress上的代码

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($) {

现在可行。

Noob JS关于Drop Downs的多功能

1 个答案: