javascript - php html form select option to populate text field jquery -

i'm editing wordpress plugin:

it has dropdown option list user, , based on user, want fill text field users email.

selection option dropdown:

<div>     <label for="customer_id"></label>     <select name="customer_id" id="customer_id" />     <option value='0'>none</option>     <?php foreach ($customers $customer) { ?>       <option value='<?php echo $customer->customer_id; ?>'><?php echo $customer->customer_name; ?></option>     <?php } ?>     </select> </div> 

the customer email stored in $customer->customer_email

and im trying fill in following value when user changes selected user:

<div class="form-field">   <label for="order_email"></label>   <input type='text' name="order_email" id="order_email" /> </div> 

i've played around filling order_email following script, sents value customer_id. how change value email

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ready(function(){     $('#customer_id').on('change', function () {         var selection = $(this).val();         $('#order_email').val(selection);     }); }); </script> 

you add title attribute options equal whatever email value is:

play around here: http://jsfiddle.net/7bumg/3876/

this might not best solution , hacky, should trick. break after plugin updated

<div>     <label for="customer_id"></label>     <select name="customer_id" id="customer_id" />     <option value='0'>none</option>     <?php foreach ($customers $customer) { ?>       <option title='<?php echo $customer->customer_email; ?>'value='<?php echo $customer->customer_id; ?>'><?php echo $customer->customer_name; ?></option>     <?php } ?>     </select> </div> 

and

$(document).ready(function(){     $('#customer_id').change(function() {     var email = $(this).find("option:selected").attr("title");     $('#order_email').val(email); }); });