# Capture Option data on Select Change

Sometimes we want to 'listen' to an event change of the `select` element. Especially when the option is changed - and get the newly selected value and store it elsewhere. For this we use `onchange` on the `select` element and not on the `option` element.

There are 2 ways to get the selected option's value, I'll show both, the first one being deprecated but still works but has been Legacy’d into standarization for the window object.

1. [event.target](http://event.target).selectedIndex
    
2. this.selectedIndex
    

The `event` object is part of `window` object which should be `window.event` but browsers *may* drop support for it in the future. Instead use `this.selectedIndex`.

`this[this.selectedIndex].getAttribute('data-email')`

```xml
<!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[this.selectedIndex].getAttribute('data-email');
                document.querySelector('#user-mobile').value = this[this.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>
```

Demo : [https://anjanesh.s3.amazonaws.com/demo/capture-option-data-on-select-change.html](https://anjanesh.s3.amazonaws.com/demo/capture-option-data-on-select-change.html)
