javascript - 自动更新 Dropdrop 列表和值

Question

我的下拉列表有问题。当我更改下拉列表时，最终值(订阅按钮)仅在选择框时发生变化。但是，如果例如用户每 21 天选择 1 个盒子，但随后决定更改为 3 个盒子，则最终值不会更改，直到用户再次选择天数。有没有办法让它根据所选框的数量自动更新，而不需要额外的步骤来再次选择框来更新值。

HTML 代码:

        <span>Select Number of Boxes</span><br>

        <select id="Boxes" class="Boxes" name="Boxes">
          <option value="1box">1 Box</option>
          <option value="3box">3 Boxes</option>
          <option value="6box">6 Boxes</option>
        </select>

        <br><br><span>Select Days</span><br>   

        <div class="container">
          <div class="1box">
            <select class="second-level-select" id="second-level-select-1box">
              <option value="1box14days" selected="selected">14 Days</option>
              <option value="1box21days">21 Days</option>
              <option value="1box30days">30 Days</option>
            </select>
          </div>

          <div class="3box">
            <select class="second-level-select" id="second-level-select-3box">
              <option value="3box14days">14 Days</option>
              <option value="3box21days">21 Days</option>
              <option value="3box30days">30 Days</option>
            </select>
          </div>

          <div class="6box">
            <select class="second-level-select" id="second-level-select-6box">
              <option value="6box14days">14 Days</option>
              <option value="6box21days">21 Days</option>
              <option value="6box30days">30 Days</option>
            </select>
          </div>
        </div>          

        <div class="second-level-container">
          <div class="1box14days">
            <br>
            <form action="https://www.pp.com" method="post" target="_top">
              <input type="hidden" name="on0" value="1 Box Every 14 Days">Receive 1 every 14 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
            </form>

          </div>
          <div class="1box21days">
            <br>
            <form action="https://www.pp.com" method="post" target="_top">
            <input type="hidden" name="on0" value="Receive 1 Box Every 21 Days">Receive 1 Box Every 21 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
            </form>

          </div>
          <div class="1box30days">
            <br>
            <form action="https://www.pp.com" method="post" target="_top">
            <input type="hidden" name="on0" value="Receive 1 Box Every 30 Days">Receive 1 Box Every 30 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
            </form>
          </div>

          <div class="3box14days">
            <br>
            <form action="https://www.pp.com" method="post" target="_top">
        <input type="hidden" name="on0" value="Receive 3 Boxes Every 14 Days">Receive 3 Boxes Every 14 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
            </form>
          </div>

          <div class="3box21days">
            <br>
            <form action="https://www.pp.com" method="post" target="_top">
       <input type="hidden" name="on0" value="Receive 3 Boxes Every 21 Days">Receive 3 Boxes Every 21 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
            </form>
          </div>

          <div class="3box30days">
            <br>
            <form action="https://www.pp.com" method="post" target="_top">
        <input type="hidden" name="on0" value="Receive 3 Boxes Every 30 Days">Receive 3 Boxes Every 30 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
            </form>
          </div>

          <div class="6box14days">
            <br>
            <form action="https://www.pp.com/" method="post" target="_top">
       <input type="hidden" name="on0" value="Receive 6 Boxes Every 14 Days">Receive 6 Boxes Every 14 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
            </form>
          </div>

          <div class="6box21days">
            <br>
            <form action="https://www.pp.com/" method="post" target="_top">
       <input type="hidden" name="on0" value="Receive 6 Boxes Every 21 Days">Receive 6 Boxes Every 21 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
              </form>
          </div>

          <div class="6box30days"><br>
            <form action="https://www.pp.com/" method="post" target="_top">
        <input type="hidden" name="on0" value="Receive 6 Boxes Every 30 Days">Receive 6 Boxes Every 30 Days<br>
              <button type="submit" name="submit" class="btn"><span>Subscribe Now</span></button>
              </form>
          </div>
        </div>

Javascript:

$(document).ready(function() {
  $('#Boxes').bind('change', function() {
    var elements = $('div.container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
      elements.filter('.' + value).show(); // show the ones we want
    }
    else {
      $('.Boxes').val($(".Boxes option:first").val());
      elements.filter('.' + value).show();
    }
  }).trigger('change');

  $("#Boxes").val($("#Boxes option:first").val());
  $('.second-level-select').bind('change', function() {
    var elements2 = $('div.second-level-container').children().hide(); // hide all the elements
    var value2 = $(this).val();

    if (value2.length) { // if somethings' selected
      elements2.filter('.' + value2).show(); // show the ones we want
    }
  }).trigger('change');
  $('div.second-level-container').children('.1box14days').show(); // to hide on mobile
  $('div.second-level-container').children('.3box14days').hide(); // to hide on mobile
  $('div.second-level-container').children('.6box14days').hide(); // to hide on mobile
});

在 JSFiddle 中打开 - https://jsfiddle.net/jgsg/or73b5f6/3/

请给我建议或指出正确的方向。谢谢!

Answer 1

不管为什么，我从一开始就写了代码。你可以根据这个逻辑继续。我更改了一些类的名称和值，您也可以更改。但最好在 value 中仅使用 number。

// detect on load

var selectedBoxs = $('#Boxes option:selected').val();
var selectedDays = $('#Days option:selected').val();

$('#result').text('Receive '+selectedBoxs+' Boxes Every '+selectedDays+' Days');

$('.buttons').html('<button>Subscribe Now For '+selectedBoxs+' Boxes Every '+selectedDays+' Days</button>');

// detect on change

$('#Boxes').change(function(){
var selectedBoxs2 = $('#Boxes option:selected').val();
var selectedDays2 = $('#Days option:selected').val();
$('#result').text('Receive '+selectedBoxs2+' Boxes Every '+selectedDays2+' Days');

$('.buttons').html('<button>Subscribe Now For '+selectedBoxs2+' Boxes Every '+selectedDays2+' Days</button>');
});

$('#Days').change(function(){
var selectedBoxs2 = $('#Boxes option:selected').val();
var selectedDays2 = $('#Days option:selected').val();
$('#result').text('Receive '+selectedBoxs2+' Boxes Every '+selectedDays2+' Days');

$('.buttons').html('<button>Subscribe Now For '+selectedBoxs2+' Boxes Every '+selectedDays2+' Days</button>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Select Number of Boxes</label>
<select id="Boxes" class="Boxes" name="Boxes">
  <option value="1" selected="selected">1 Box</option>
  <option value="3">3 Boxes</option>
  <option value="6">6 Boxes</option>
</select>
<br><br>
<label>Select Days</label>
<select id="Days" class="Days" name="Days">
  <option value="14" selected="selected">14 Days</option>
  <option value="21">21 Days</option>
  <option value="30">30 Days</option>
</select>
<br><br>
<a id="result">Receive 0 Boxes Every 0 Days</a>

<div class="buttons">
</div>