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.

event.target.selectedIndex
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')

<!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

Capture Option data on Select Change

Subscribe to my newsletter

Anjanesh Lekshminarayanan

Anjanesh Lekshminarayanan