JSFiddle - React, Tailwind, and code Playground

by forloop

HTML

<p id="dialog">No favourite? C'mon!</p>

<select>
    <option value="">Please select you X-Person of choice</option>
    <option value="1">Wolverine</option>
    <option value="2">Cyclops</option>
    <option value="3">Professor X</option>
    <option value="4">Jean Grey</option>
    <option value="5">Beast</option>
    <option value="6">Rogue</option>
    <option value="7">Storm</option>
    <option value="8">Gambit</option>
    <option value="9">Jubilee</option>
</select>

CSS

body {
 font-family: Tahoma, Arial, Helvetica;   
}

p {
 background-color: #BAE8AE;
 color: #599349;
 border: 1px solid #599349;
 border-radius: 10px;
 padding: 10px;  
 margin: 20px 20px;
}

select {
 margin: 0 20px;  
 padding: 5px; 
}

JavaScript

// code in script-1.js

// function to run when the DOM has loaded
$(function () {
   // #dialog is just a simple <p> element
    var dialog  = $('#dialog'),
        orig = dialog.text();

    // bind a handler to the custom namespaced event "dialog.updateMessage"
    $(document).on('dialog.updateMessage',  function (e, message) {
        dialog.text(message || orig);
    });
});


// code in script-2.js

// function to run when the DOM has loaded
$(function () {
    $('select').change(function () {
        // raise the dialog.updateMessage and pass it a message
        $(document).triggerHandler('dialog.updateMessage', [this.value? 'You chose value: ' + this.value : this.value]);
    });
});