JSFiddle - React, Tailwind, and code Playground

by Nazmus Nasir

HTML

<!-- Easy jQuery - Detecting Change in Dropdown option - #8 -->
<p>
Welcome to the eighth Easy jQuery Tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. In this tutorial, let's learn about detecting change in dropdown. 
</p>
<p>
We'll be using the 'change' event for the exercise below. 
</p>

<h2>
Let's practice: 
</h2>

<select id="dropdown">
	<option selected disabled>Pick a Topic</option>
  <option>JavaScript</option>
  <option>C++</option>
  <option>Excel</option>
  <option>jQuery</option>
</select>

<div>
<h3>You chose: <span id="selected"></span></h3>
</div>

<select id="color">
	<option selected disabled>Pick a color</option>
  <option>Red</option>
  <option>Blue</option>
  <option>Green</option>
	<option>Purple</option>
	<option>Orange</option>
  <option>Black</option>
</select>

JavaScript

$("#dropdown").on("change", function(){
	var selected = $(this).val();
  $("#selected").text(selected);
});

$("#color").on("change", function(){
	var c = $(this).val();
  $("#selected").css("color", c);
});