javascript - How to populate two text fields from one select drop-down -

i have following html produced cakephp's form helper. in interface, user selecting 2 dates used in resulting php pull data mysql. have provided user "financial months", defined in mysql shortcut pre-populate 2 date fields. however, have absolutely no idea how achieve jquery/javascript knowledge limited.

what want do: when user selects select box, value of option before _ pulled in date1, , value of option after _ pulled in date 2.

is possible?

edit: here code in cakephp produces form:

<script type="text/javascript" src="/js/revenuelines.js"></script>  <h1>lock revenue</h1>  <div class="inner">      <p>select 2 dates lock revenue specified period.</p>      <?php      echo $this->form->create('lock');      ?>      <span>between</span>     <?php      echo $this->form->input('revenueline.date1', array('div' => false, 'class' => 'input datepicker', 'label' => false));      echo "&nbsp;and&nbsp;";      echo $this->form->input('revenueline.date2', array('div' => false, 'class' => 'input datepicker', 'label' => false));      echo $this->form->submit('submit', array('label' => false, 'div' => false, 'class' => 'submit_black gradient', 'style' => 'display: inline;'));       echo $this->form->input('financialmonth.selector', array('label' => '&nbsp;&nbsp;&nbsp;...or select financial month auto-populate&nbsp;&nbsp;&nbsp;', 'div' => false, 'class' => 'input', 'options' => $months));      echo $this->form->end();       ?> </div> 

here actual html produced:

<div id="content">                          <script type="text/javascript" src="/js/revenuelines.js"></script>  <h1>lock revenue</h1>  <div class="inner">      <p>select 2 dates lock revenue specified period.</p>      <form action="/revenue_lines/lock" id="locklockform" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="post"></div>     <span>between</span>     <input name="data[revenueline][date1]" class="input datepicker hasdatepicker" type="text" id="revenuelinedate1">&nbsp;and&nbsp;<input name="data[revenueline][date2]" class="input datepicker hasdatepicker" type="text" id="revenuelinedate2"><input class="submit_black gradient" style="display: inline;" type="submit" value="submit"><label for="financialmonthselector">&nbsp;&nbsp;&nbsp;...or select financial month auto-populate&nbsp;&nbsp;&nbsp;</label><select name="data[financialmonth][selector]" class="input" id="financialmonthselector"> <option value="22jun2013_26jul2013">2013 - july</option> <option value="27jul2013_30aug2013">2013 - august</option> </select></form></div>                     </div> 

yes is!, code here:

jquery demo here , code under:

$('#financialmonthselector').on('change', function () {     var val = this.value; // value select     var parts = val.split("_"); // split value on "_" generating array     $('#revenuelinedate1').val(parts[0]); // give input linedate1 arrays first value     $('#revenuelinedate2').val(parts[1]); // give input linedate2 arrays second value }); 

and in plain javascript (demo)

var selectel = document.getelementbyid('financialmonthselector'); selectel.onchange = function () {     var input1 = document.getelementbyid('revenuelinedate1');     var input2 = document.getelementbyid('revenuelinedate2');     var val = this.value;     var parts = val.split("_");     input1.value = parts[0];     input2.value = parts[1]; }