CODEWITHSUNDEEP
javascriptjqueryhtml
Jamdev
Jamdev

Reputation: 552

Change the data when the option is selected

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

Upvotes: 2

Views: 55

Answers (3)

Pablo Darde
Pablo Darde

Reputation: 6402

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

Upvotes: 1

Ren&#233; H&#246;hle
Ren&#233; H&#246;hle

Reputation: 27285

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

Upvotes: 2

Towkir
Towkir

Reputation: 4004

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

Upvotes: 2

Related Questions