js select option value
// other.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change on value select</title>
</head>
<body>
<span class="wpcf7-form-control-wrap Profession"
><select name="Profession" class="select" aria-invalid="false">
<option value="Nurse">Nurse</option>
<option value="Doctor">Doctor</option>
<option value="Lawyer">Lawyer</option>
<option value="Accountant">Accountant</option>
<option value="Developer">Developer</option>
<option value="Architect">Architect</option>
<option value="Other">Other</option>
</select></span
>
<div class="other_role"><h1>It works!!!</h1></div>
<script src="other.js"></script>
</body>
</html>
/* other.js - hide the div with the class 'other_role'
* and display it when the user selects 'other' from the options
* you can display anything you like and feel free to refactor the code
*/
document.querySelector(".other_role").style.display = "none";
let roleOptionSelect = document.querySelector(".select");
roleOptionSelect.addEventListener("change", function () {
if (roleOptionSelect.value === "Other") {
console.log(roleOptionSelect.value);
document.querySelector(".other_role").style.display = "block";
} else {
console.log("Meh!!!");
document.querySelector(".other_role").style.display = "none";
}
});