Question

我有以下定价计划，当选择了适当的选项时，我试图更改列表项<li>Gain 20 Likes</li>的数据的做法已经破产了。例如，当选择选项<option value="10.00">15 .......$10.00</option>时，我希望列表项显示<li>Gain 15 Likes</li>，当选择<option value="15.00">30 .......$15.00</option>时显示<li>Gain 30 Likes</li>等。我的JavaScript知识太贫乏，无法解决此问题不幸的是。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col"><!-- t#4-starts -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Plan</h3>
            </div>
            <div class="panel-body">
                <div class="the-price">
                    <div class="form-group" style="margin-bottom:13px;">
                        <select class="form-control" id="followersPlans" name="followersPlans">
                            <option value="10.00">15 .......$10.00</option>
                            <option value="15.00">30 .......$15.00</option>
                            <option value="30.00">50 .......$30.00</option>
                            <option value="60.00">100 .....$60.00</option>
                            <option value="100.00">200 .....$100.00</option>
                            <option value="140.00">300 .....$140.00</option>
                            <option value="220.00">500 .....$220.00</option>
                            <option value="420.00">1000 ...$420.00</option>
                        </select>
                    </div>
                    <p class="mini">Monthly Subscription</p>
                    <a href="#" class="btn btn-block btn-success" role="button">Activate</a>                
                </div>
                <ul class="pricing__list">
                    <li>No Survey Required</li>
                    <li>Gain 20 Likes</li>
                </ul>
            </div>
        </div>
    </div><!-- t#4-ends -->

Answer 1

您可以在选项中使用数据属性，并使用所需的数据设置第二个值，例如：

使用jQuery，您可以使用<div class="form-group" style="margin-bottom:13px;"> <select class="form-control" id="followersPlans" name="followersPlans"> <option data-like="15" value="10.00">15 .......$10.00</option> <option data-like="30" value="15.00">30 .......$15.00</option> <option data-like="50" value="30.00">50 .......$30.00</option> </select> </div>函数访问该值，如下所示：

.data()

Answer 2

当您想将$的金额存储在选项项的value属性上时，您可能希望使用data-attributes来存储类似的数字。

这是使用jQuery的方法：

$(document).ready(function() {
  $('#followersPlans').on('change', function() {
    // console.log($(this).find('option:selected').data('likes'));
    var likes = $(this).find('option:selected').data('likes');
    $('.updateLikes').html('Gain ' + likes + ' Likes');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col">
  <!-- t#4-starts -->
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Plan</h3>
    </div>
    <div class="panel-body">
      <div class="the-price">
        <div class="form-group" style="margin-bottom:13px;">
          <select class="form-control" id="followersPlans" name="followersPlans">
            <option value="10.00" data-likes="15">15 .......$10.00</option>
            <option value="15.00" data-likes="30">30 .......$15.00</option>
            <option value="30.00" data-likes="50">50 .......$30.00</option>
            <option value="60.00" data-likes="100">100 .....$60.00</option>
            <option value="100.00" data-likes="200">200 .....$100.00</option>
            <option value="140.00" data-likes="300">300 .....$140.00</option>
            <option value="220.00" data-likes="500">500 .....$220.00</option>
            <option value="420.00" data-likes="1000">1000 ...$420.00</option>
          </select>
        </div>
        <p class="mini">Monthly Subscription</p>
        <a href="#" class="btn btn-block btn-success" role="button">Activate</a>
      </div>
      <ul class="pricing__list">
        <li>No Survey Required</li>
        <li class='updateLikes'>Gain 20 Likes</li>
      </ul>
    </div>
  </div>
</div>
<!-- t#4-ends -->

Answer 3

这是Vanilla JavaScript的简单解决方案。

var plans = document.getElementById("followersPlans");

var selectedPlan = document.getElementById("selected-plan");

plans.addEventListener('change', setLikes);

function setLikes() {
	var value = plans.querySelector('option:checked').dataset.like;
  selectedPlan.innerHTML = "Gain " + value + " Likes";
}

setLikes();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col"><!-- t#4-starts -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Plan</h3>
            </div>
            <div class="panel-body">
                <div class="the-price">
                    <div class="form-group" style="margin-bottom:13px;">
                        <select class="form-control" id="followersPlans" name="followersPlans">
                            <option data-like="15" value="10.00">15 .......$10.00</option>
                            <option data-like="30" value="15.00">30 .......$15.00</option>
                            <option data-like="50" value="30.00">50 .......$30.00</option>
                            <option data-like="100" value="60.00">100 .....$60.00</option>
                            <option data-like="200" value="100.00">200 .....$100.00</option>
                            <option data-like="300" value="140.00">300 .....$140.00</option>
                            <option data-like="500" value="220.00">500 .....$220.00</option>
                            <option data-like="1000" value="420.00">1000 ...$420.00</option>
                        </select>
                    </div>
                    <p class="mini">Monthly Subscription</p>
                    <a href="#" class="btn btn-block btn-success" role="button">Activate</a>                
                </div>
                <ul class="pricing__list">
                    <li>No Survey Required</li>
                    <li id="selected-plan">Gain 20 Likes</li>
                </ul>
            </div>
        </div>
    </div><!-- t#4-ends -->

选择该选项时更改数据

3 个答案: