选择该选项时更改数据

Question

I have the following pricing plan and I've already broke my had trying to change the data of list item <li>Gain 20 Likes</li> when the appropriate option is chosen. For example when chosen the option <option value="10.00">15 .......$10.00</option> I want the list item to display <li>Gain 15 Likes</li> , when chosen <option value="15.00">30 .......$15.00</option> to display <li>Gain 30 Likes</li> etc. My javascript knowledge is too poor to solve this problem unfortunately.

 <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

You could work with data attributes in your options and set a second value with that data you need for example:

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

With jQuery you can access that values with the .data() function something like this:

$(document).ready(function() {
    $("#followersPlans").change(function() {
        var yourData = $("#followersPlans option:selected").data('like');

        # Alternative
        # var likes = $(this).find('option:selected').data('likes');
        console.log(yourData);
    });
});

Answer 2

As you want to store your $ amount on the value attributes of the options items, you might want to use data-attributes to store the like numbers.

Here is how to do it with 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

Here is a simple solution with 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 -->