JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="form-group">
    <label for="customer">Customer</label>
    <select class="form-control" id="customer">
        <option data-address="address 1">Customer 1</option>
        <option data-address="address 2">Customer 2</option>
        <option data-address="address 3">Customer 3</option>
        <option data-address="address 4">Customer 4</option>
        <option data-address="address 5">Customer 5</option>
    </select>
</div>
<div class="form-group">
    <label for="address">Address</label>
    <input type="text" id="address" class="form-control">
</div>

CSS

body { padding: 20px; }

JavaScript

$('#customer').change(function() {
    $('#address').val($('option:selected', this).data('address'));
});