To load accounts, we define a drop-down menu with empty content, as follows:

<div class="form-group">
                <label for="exampleFormControlSelect1">Accounts</label>
                <select class="form-control" id="accts">
                </select>
              </div>

When we load the page, we will use web3.eth.accounts to get all 10 default accounts. Notice that the first account has an ether balance of 99.84; this is because we used the first account as the owner account to deploy the contract and burned some gas as the transaction fee, as shown in the following code:

    web3.eth.accounts.forEach( function(e){
        $('#accts').append($('<option>', {
            value:e,
            text : e + " (" +web3.fromWei(web3.eth.getBalance(e), "ether") + " ether)"
        }));
})

Once the accounts are loaded, it will be displayed as follows: