Select field JQ

Hide show elements on the page

by mauro_nappolini

HTML

<label for="aioConceptName">AIO Concept Name</label>
<select class="options-list" id="option-set-4778072eda79a36f61e08898bd06abfe">
    <option value="2">Select One</option>
    <option value="53edb7bdbe0854d741ebacfc57a5ae61">Individual</option>
    <option value="8f7ae04b2f7b188b9359952f7a538099">Pair</option>
</select>


<div class="paypal-pay-in-3-cta">
  Payal text 
</div>

<div class="pay-in-three-btn">
  Payal BTN 
</div>

<div class="product-price">
  1500
</div>


<div data-wf-sku-bindings="%5B%7B%22from%22%3A%22f_sku_values_3dr%22%2C%22to%22%3A%22optionValues%22%7D%5D" data-commerce-product-sku-values="%7B%22f40e9cc44847c141654a1cb505c7e79b%22%3A%224f344893c8b243f1bb01fbe46c461a44%22%2C%224778072eda79a36f61e08898bd06abfe%22%3A%2253edb7bdbe0854d741ebacfc57a5ae61%22%7D" data-node-type="commerce-add-to-cart-option-list" data-commerce-product-id="63a2db47a1fb7d74693d4df7" data-preselect-default-variant="false" class="options-list" role="group">

<div class="option-list-child" role="group">
  <select id="option-set-f40e9cc44847c141654a1cb505c7e79b" data-node-type="commerce-add-to-cart-option-select" data-commerce-option-set-id="f40e9cc44847c141654a1cb505c7e79b" class="w-select" required=""><option selected="" value="">Select Cohort Date</option><option value="4f344893c8b243f1bb01fbe46c461a44">19th January 2023</option><option value="0ef35284207e3c8350b43b1f718afe67">16th February 2023</option><option value="bf962a8a72d104d480efe64465267784">16th March 2023</option><option value="1a425151b40e8ac671abf05b2acb6d88">13th April 2023</option></select></div>

  <div class="option-list-child" role="group"><select id="option-set-4778072eda79a36f61e08898bd06abfe" data-node-type="commerce-add-to-cart-option-select" data-commerce-option-set-id="4778072eda79a36f61e08898bd06abfe" class="w-select" required=""><option selected="" value="">Select Enrollment Option</option><option value="53edb7bdbe0854d741ebacfc57a5ae61">Individual</option><option...

JavaScript

let pair = '8f7ae04b2f7b188b9359952f7a538099';
let individual = '53edb7bdbe0854d741ebacfc57a5ae61'; 


//Create on change function using the select field 


// Get the selected value 


// If statement to display and hide the Paypal CTA 

$('.options-list').on('change', function() {
    selectVal = ( $(this).find(":selected").val() );
    console.log(selectVal);
    
    if (selectVal == pair) {
 			 console.log('pair');
       $('.paypal-pay-in-3-cta,.pay-in-three-btn').css( "display", "none" );
       $('.product-price').html("900")
		} else if (selectVal == individual) {
  		console.log('individual');
      $('.paypal-pay-in-3-cta,.pay-in-three-btn').css( "display", "block" );
      $('.product-price').html("1500")
		} 
    
});



let select = document.getElementById('option-set-4778072eda79a36f61e08898bd06abfe')