自動更新ドロップドロップリストと値

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

私は最初からコードを書いていましたが、理由は問いません。このロジックに基づいて先に進むことができます。あなたが変更できるクラスと価値の名前を変更しました。しかし、numberをvalueに使用する方が良いでしょう。

// 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>