JavaScript

Capture Option data on Select Change

Capture Option data on Select Change

Replacing deprecated event.target.selectedIndex with this.selectedIndex

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·

1 min read

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.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')

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

HTMLselectoptiononchangewindow object