JSFiddle - React, Tailwind, and code Playground

by williamtdavies

HTML

<ul class="quick-contact">
    <li class="phone"><strong>Sales: </strong><span class="phone__number">0987 989898</span></li>
    <li class="email"><strong>Email: </strong><a href="#" title="Sample link">[email protected]</a></li>
    <li class="sites"><strong>Sites: </strong><select class="inputbox"><option value="123">USA</option><option value="456">UK</option><option value="789">France</option><option value="101112">Japan</option><option value="131415">South Africa</option></select></li>
</ul>

JavaScript

// Function to update the sales phone number
function changePhoneNumber(phoneNumber){ 
   // Writes HTML into the span with class "phone__number"
   $('.phone__number').html(phoneNumber);
}

// Change event calls the function to update the sales number
// Passes the new value after change into the function
$('.inputbox').on('change', function(){
   var phoneNumber = $(this).val();
    changePhoneNumber(phoneNumber);
});

// Calls the function on load in case the select box selection has remained from a previous change
$(document).ready(function(){
    changePhoneNumber($('.inputbox').val());
});