DDL change event

In this example below you will see how to do a DDL change event with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ColdToast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ColdToast ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>DDL change event</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <select id="selectArchitecture" class="custom-select">
  <option value="">Select a thing…</option>
  <option value="1234">Pigs</option> 
  <option value="12345">Cats</option>
  <option value="123456">Voldemort</option>
</select>

<div class="valueOfSelectedThing"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ColdToast/ddl-change-event-LOYoax */
html,
body {
  padding: 15px;
}


/*Downloaded from https://www.codeseek.co/ColdToast/ddl-change-event-LOYoax */
let $selectArchitecture = document.querySelector('#selectArchitecture')
  , $valueOfSelectedThing = document.querySelector('.valueOfSelectedThing')
  ;

let onChangeOfArchitecture = function (event) {
  $valueOfSelectedThing.innerHTML = event.target.value
}

if ($selectArchitecture) {
  $selectArchitecture.onchange = onChangeOfArchitecture
}

Comments