JSFiddle - React, Tailwind, and code Playground

HTML

<select name="origin" id="s1" class="editable-select">
                              <option value=""></option>
                              <option value="Bangalore">Bangalore (BLR)</option>
                                <option value="Chennai">Chennai (MAA)</option>
                                <option value="Goa">Goa (GOI)</option>
                                <option value="Hyderabad">Hyderabad (HYD)</option>
                                <option value="Kolkata">Kolkata (CCU)</option>
                                <option value="Mumbai">Mumbai (BOM)</option>
                                <option value="New Delhi">New Delhi (DEL)</option>
                                <option value="Pune">Pune (PNQ)</option>
</select>


<select id="s2" class="editable-select" name="destination">
                              <option value=""></option>
                              <option value="Bangalore">Bangalore (BLR)</option>
                                <option value="Chennai">Chennai (MAA)</option>
                                <option value="Goa">Goa (GOI)</option>
                                <option value="Hyderabad">Hyderabad (HYD)</option>
                                <option value="Kolkata">Kolkata (CCU)</option>
                                <option value="Mumbai">Mumbai (BOM)</option>
                                <option value="New Delhi">New Delhi (DEL)</option>
                                <option value="Pune">Pune (PNQ)</option>
</select>

JavaScript

$('#s1').change(function() {
    $('#s2').focus();
    $('#s2').attr('size',9);
});

$('#s2').change(function() {
    $('#s2').attr('size',1);
});

$('#s2').focusout(function() {
    $('#s2').attr('size',1);
});