Javascript 自动更新下拉列表和值

我的下拉列表有问题。当我更改下拉列表时，选择“最终值”按钮以仅订阅框上的更改。但是，如果用户每21天选择一个框，然后决定更改为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>

在JSFIDLE中打开-

---

请给我指点方向。谢谢

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

//负载检测 var selectedBoxs=$框选项：selected'.val； var selectedDays=$天选项：selected'.val； $'result'。文本'Receive'+selectedBoxs+'框隔'+selectedDays+'天'； $'.buttons'.html'立即订阅'+selectedBoxs+'框，每'+selectedDays+'Days'； //检测变化 $'box'.changefunction{ var selectedBoxs2=$框选项：selected'.val； var selectedDays2=$天选项：selected'.val； $'result'。文本'Receive'+selectedBoxs2+'框每隔'+selectedDays2+'天'； $'.buttons'.html'每'+selectedDays2+'Days'订阅'+selectedBoxs2+'框一次'； }; $'Days'.change函数{ var selectedBoxs2=$框选项：selected'.val； var selectedDays2=$天选项：selected'.val； $'result'。文本'Receive'+selectedBoxs2+'框每隔'+selectedDays2+'天'； $'.buttons'.html'每'+selectedDays2+'Days'订阅'+selectedBoxs2+'框一次'； }; 选择框的数量 1盒 3盒 6盒 选择日期 14天 21天 30天 每0天收到0盒

---

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

//负载检测 var selectedBoxs=$框选项：selected'.val； var selectedDays=$天选项：selected'.val； $'result'。文本'Receive'+selectedBoxs+'框隔'+selectedDays+'天'； $'.buttons'.html'立即订阅'+selectedBoxs+'框，每'+selectedDays+'Days'； //检测变化 $'box'.changefunction{ var selectedBoxs2=$框选项：selected'.val； var selectedDays2=$天选项：selected'.val； $'result'。文本'Receive'+selectedBoxs2+'框每隔'+selectedDays2+'天'； $'.buttons'.html'每'+selectedDays2+'Days'订阅'+selectedBoxs2+'框一次'； }; $'Days'.change函数{ var selectedBoxs2=$框选项：selected'.val； var selectedDays2=$天选项：selected'.val； $'result'。文本'Receive'+selectedBoxs2+'框每隔'+selectedDays2+'天'； $'.buttons'.html'每'+selectedDays2+'Days'订阅'+selectedBoxs2+'框一次'； }; 选择框的数量 1盒 3盒 6盒 选择日期 14天 21天 30天 每0天收到0盒

---

谢谢你的回答，但是，我应该把你的代码放在我的代码里的什么地方？请告知。谢谢谢谢，我真的不能这样改变它，因为结果是有一个链接和一个按钮，按钮将它链接到其他地方，每个按钮都不一样。谢谢你帮助我的朋友。期待你的代码已经完全把我弄糊涂了，除此之外，你还试图显示基于所选值的容器吗？告诉我你想做什么，我写在我的代码上，我不能处理你的代码。谢谢你的帮助谢谢你的回答，但是，我应该把你的代码放在我的代码里的什么地方？请告知。谢谢谢谢，我真的不能这样改变它，因为结果是有一个链接和一个按钮，按钮将它链接到其他地方，每个按钮都不一样。谢谢你帮助我的朋友。期待你的代码已经完全把我弄糊涂了，除此之外，你还试图显示基于所选值的容器吗？告诉我你想做什么，我写在我的代码上，我无法处理你的代码。谢谢你的帮助

$(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
});