Skip to content

Instantly share code, notes, and snippets.

@anjanesh

anjanesh/select-on-change.html

Created January 19, 2024 04:42
Show Gist options
  • Save anjanesh/ed3aa2502bbf5f0d06e6c85bf8e38150 to your computer and use it in GitHub Desktop.
Save anjanesh/ed3aa2502bbf5f0d06e6c85bf8e38150 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
select-on-change.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Cache-control" content="no-cache">
<title>capture option data on select change</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex flex-column">
<h3 class="mb-3">User</h3>
<div class="input-group mb-3">
<select
id="user"
onchange="
document.querySelector('#user-email').value = this[event.target.selectedIndex].getAttribute('data-email');
document.querySelector('#user-mobile').value = this[event.target.selectedIndex].getAttribute('data-mobile');
"
class="form-control"
>
<option selected>Select a User</option>
<option value="1" data-email="john@yahoo.com" data-mobile="6666666666">John Matthews</option>
<option value="4" data-email="harry@gmail.com" data-mobile="8888888888">Harry Smith</option>
<option value="5" data-email="donald@hotmail.com" data-mobile="3333333333">Donald More</option>
<option value="19" data-email="smith@matrix.com" data-mobile="1111111111">Agent Smith</option>
<option value="20" data-email="bruce@space.com" data-mobile="9898989898">Bruce Kennedy</option>
</select>
</div>
<div class="mb-3">
<input type="text" name="user-email" id="user-email" class="form-control" placeholder="Email" disabled />
</div>
<div>
<input type="text" name="user-mobile" id="user-mobile" class="form-control" placeholder="Mobile" disabled />
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment