jquery ui - JQueryUI set datepicker default date using select element value -

i have datepicker want set defaultdate parameter 6, 12, 24 or 60 months today using select element.

i have running trouble change selected option using select element value of select element not update in dom, datepicker using selected value loaded page.

i have made fiddle of here http://jsfiddle.net/glstm/1/ can see i'm referring to.

<form> <select name="interval" id="interval">     <option value="6">6 months</option>     <option value="12">12 months</option>     <option value="24">2 years</option>     <option value="60">5 years</option> </select> <input type="text" class="date" placeholder="dd/mm/yyyy"></input> 

$(".date").datepicker({         dateformat: 'dd/mm/yyyy',         showon: 'button',         firstday: 1,         defaultdate: "+"+$("#interval").val()+"m"     }); 

the default date of datepicker '+6m' if change select 12 months, datepicker still uses 6 months. want update datepicker defaultdate: '+12m'

can see make work?

thanks greg

changing value of select affect date picker if tell date picker change. otherwise, never learn of change because set once using starting value.

$("#interval").on("change", function() {     $(".date").datepicker("option", "defaultdate", "+" + $(this).val() + "m"); }); 

alternatively, pass object incase ever need send more 1 option value:

$("#interval").on("change", function() {     $(".date").datepicker("option", { defaultdate: "+" + $(this).val() + "m" }); });