Change the data when the option is selected

Question

I have the following pricing plan and I've already broke my had trying to change the data of list item

Gain 20 Likes

when the appropriate option is chosen. For example when chosen the option I want the list item to display Gain 15 Likes, when chosen to display Gain 30 Likes etc. My javascript knowledge is too poor to solve this problem unfortunately.



        
            
                Plan
            
            
                
                    
                        
                    
                    Monthly Subscription
                    Activate                
                
                
                    No Survey Required
                    Gain 20 Likes

user_411918 · Answer

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

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

user_4012913 · Answer

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



  
  
    
      Plan
    
    
      
        
          
        
        Monthly Subscription
        Activate
      
      
        No Survey Required
        Gain 20 Likes

user_1703696 · Answer

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



        
            
                Plan
            
            
                
                    
                        
                    
                    Monthly Subscription
                    Activate                
                
                
                    No Survey Required
                    Gain 20 Likes

Change the data when the option is selected

3 Answers