ドロップダウンオプションに応じたテーブルの内容の変更

Question

私は、ブートストラップと1つの単純なドロップダウンJavascriptで価格表を作成しました。

ユーザーが「オプション1」を選択すると、現在「100メールの取得」と表示されている箇条書きが「300メールの受信」および「1日の最大メール：3」に変更され、「最大1日あたりの電子メール数：6 "

ユーザーが「オプション2」を選択した場合、現在「100メールの取得」と「600メールの取得」および「1日あたりの最大メール：3」という行頭が「1日あたりの最大メール： 10 "となる。

残念ながら私はJavascriptのエキスパートではありません（私はJSでは非常に悪いです）。ご協力いただきありがとうございます。

$(document).ready(function() { 
 
    $(".btn-select").each(function (e) { 
 
     var value = $(this).find("ul li.selected").html(); 
 
     if (value != undefined) { 
 
      $(this).find(".btn-select-input").val(value); 
 
      $(this).find(".btn-select-value").html(value); 
 
     } 
 
    }); 
 
}); 
 

 
$(document).on('click', '.btn-select', function (e) { 
 
    e.preventDefault(); 
 
    var ul = $(this).find("ul"); 
 
    if ($(this).hasClass("active")) { 
 
     if (ul.find("li").is(e.target)) { 
 
      var target = $(e.target); 
 
      target.addClass("selected").siblings().removeClass("selected"); 
 
      var value = target.html(); 
 
      $(this).find(".btn-select-input").val(value); 
 
      $(this).find(".btn-select-value").html(value); 
 
     } 
 
     ul.hide(); 
 
     $(this).removeClass("active"); 
 
    } 
 
    else { 
 
     $('.btn-select').not(this).each(function() { 
 
      $(this).removeClass("active").find("ul").hide(); 
 
     }); 
 
     ul.slideDown(300); 
 
     $(this).addClass("active"); 
 
    } 
 
}); 
 

 
$(document).on('click', function (e) { 
 
    var target = $(e.target).closest(".btn-select"); 
 
    if (!target.length) { 
 
     $(".btn-select").removeClass("active").find("ul").hide(); 
 
    } 
 
});

/* Custom */ 
 

 

 
.btn-select { 
 
    position: relative; 
 
    padding: 0; 
 
    width: 100%; 
 
    border-radius: 2px; 
 
    margin-bottom: 13px; 
 
} 
 

 
.btn-select .btn-select-value { 
 
    padding: 6px 12px; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 34px; 
 
    text-align: left; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    border-top: none !important; 
 
    border-bottom: none !important; 
 
    border-left: none !important; 
 
} 
 

 
.btn-select .btn-select-arrow { 
 
    float: right; 
 
    line-height: 20px; 
 
    padding: 6px 10px; 
 
    top: 0; 
 
} 
 

 
.btn-select ul { 
 
    display: none; 
 
    background-color: white; 
 
    color: black; 
 
    clear: both; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    border-top: none !important; 
 
    position: absolute; 
 
    left: -1px; 
 
    right: -1px; 
 
    top: 33px; 
 
    z-index: 999; 
 
} 
 

 
.btn-select ul li { 
 
    padding: 3px 6px; 
 
    text-align: left; 
 
} 
 

 
.btn-select ul li:hover { 
 
    background-color: #f4f4f4; 
 
} 
 

 
.btn-select ul li.selected { 
 
    color: white; 
 
} 
 

 
span.mini { 
 
    font-size: 18px; 
 
    color: #31708f; 
 
} 
 
span.more { 
 
    font-size: 14px; 
 
    color: #337ab7; 
 
} 
 
.info { 
 
    display: none; 
 
    position: absolute; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    bottom: 60px; 
 
    left: 5%; 
 
    background: #337ab7 !important; 
 
    padding: 10px; 
 
    text-align: left; 
 
    line-height: 1.5; 
 
    color: #fff; 
 
    border: 3px #ddd solid; 
 
} 
 
.info:after { 
 
    content: "\e252"; 
 
    font-family: 'Glyphicons Halflings'; 
 
    color: #337ab7; 
 
    position: absolute; 
 
    bottom: -14px; 
 
    left: 45%; 
 
} 
 
.panel-footer:hover .info { 
 
    display: inline-block; 
 
} 
 

 

 

 

 
/* icons */ 
 

 
span.glyphicon-preload { 
 
    color: #23b070; 
 
    padding-right: 7px; 
 
    font-size: 13px; 
 
} 
 
span.glyphicon-prio { 
 
    color: #fff; 
 
} 
 

 
span.glyphicon-more { 
 
    font-size: 11px; 
 
} 
 
.table { 
 
    margin-bottom: 0; 
 
} 
 
.table>tbody>tr>td { 
 
    padding: 14px; 
 
} 
 
.btn-insta { 
 
    margin-top: 13px; 
 
    padding: 10px 0; 
 
    font-size: 20px; 
 
} 
 
.table-premium p { 
 
    font-weight: 700; 
 
    display: inline-block; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="col-xs-12 col-md-6"><!-- table#2-starts --> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Premium</h3> 
 
     </div> 
 
      <div class="panel-body"> 
 
       <div class="the-price"> 
 
        <a class="btn btn-default btn-select btn-select-light"> 
 
        <input type="hidden" class="btn-select-input" id="" name="" value="" /> 
 
        <span class="btn-select-value">Select an Option</span> 
 
        <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span> 
 
        <ul> 
 
        <li>Option 1</li> 
 
        <li>Option 2</li> 
 
        <li>Option 3</li> 
 
        <li>Option 4</li> 
 
        </ul> 
 
        </a> 
 
       <span class="mini">Monthly Subscription</small> 
 
       <a href="#" class="btn btn-block btn-insta btn-success" role="button">Activate</a>  
 
       </div> 
 
      <table class="table table-premium"> 
 
      <tr> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Gain 100 Emails</p> 
 
       </td> 
 
      </tr> 
 
      <tr class="active"> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Emails 0 Back</p> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>No Survey Required</p> 
 
       </td> 
 
      </tr> 
 
      <tr class="active"> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Max Emails per Day: 3</p> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
      <div class="panel-footer"> 
 
       <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More information!</span> 
 
        <div class="info well"> 
 
        <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br> 
 
        <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 1 <br> 
 
        <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 2 <br> 
 
        <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 3 <br></span> 
 
        </div><!-- well --> 
 
      </div><!-- p-f --> 
 
     </div> 
 
    </div><!-- t#2-ends -->

Answer 1

あなたは以下のコードを試すことができます。私はあなたの文書をクリック機能で更新しました。

$(document).on('click', function (e) { 
    var target = $(e.target).closest(".btn-select"); 
    if (!target.length) { 
     $(".btn-select").removeClass("active").find("ul").hide(); 
    } 
    if (!$(e.target).hasClass('btn-select-value') && $(e.target).parents('.btn-select-light').length > 0) { 
     var gainEmailTxt = "", maxEmailPerDayTxt = ""; 
     switch ($(e.target).text()) { 
      case "Option 1": 
       gainEmailTxt = "Gain 300 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 6"; 
       break; 
      case "Option 2": 
       gainEmailTxt = "Gain 600 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 10"; 
       break; 
      case "Option 3": 
       gainEmailTxt = "Gain 900 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 15"; 
       break; 
      case "Option 4": 
       gainEmailTxt = "Gain 1500 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 20"; 
       break; 
      default: 
       gainEmailTxt = "Gain 100 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 3"; 
       break; 
     } 

     $('.table-premium td:eq(0) p').text(gainEmailTxt); 
     $('.table-premium td:eq(3) p').text(maxEmailPerDayTxt); 
    } 
}); 

Answer 2

これはhopely（ジャバスクリプトソリューション無地）を動作します：

var cells = document.querySelectorAll('tr td p'); 
function opt1() { 
    rows[0].innerHTML = "Gain 300 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 6"; 
} 

function opt2() { 
    rows[0].innerHTML = "Gain 600 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 10"; 
} 

function opt3() { 
    rows[0].innerHTML = "Gain 900 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 15"; 
} 

function opt4() { 
    rows[0].innerHTML = "Gain 1500 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 20"; 
} 

var options document.querySelectorAll('.btn-select-arrow ul li'); 
options[0].onclick = opt1(): 
options[1].onclick = opt2(): 
options[2].onclick = opt3(): 
options[3].onclick = opt4():