Как заполнить два текстовых поля из одного выпадающего списка

Question

У меня есть следующий HTML-код, созданный помощником формы CakePHP. В интерфейсе пользователь выбирает две даты, которые затем используются в результирующем PHP для извлечения данных из MySQL. Я также предоставил пользователю «финансовые месяцы», которые определены в MySQL как ярлык для предварительного заполнения двух полей даты. Тем не менее, я совершенно не знаю, как этого добиться, поскольку мои знания jQuery/Javascript очень ограничены.

Что я хочу делать: Когда пользователь выбирает что-то из блока SELECT, значение параметра перед тем, как _ втягивается в date1, и значение параметра после того, как _ втянут на дату 2.

Возможно ли это?

редактировать: Вот код в CakePHP, который производит вид:

<script type="text/javascript" src="/js/revenuelines.js"></script> 

<h1>Lock revenue</h1> 

<div class="inner"> 

    <p>Select two dates to lock revenue for the 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 to auto-populate&nbsp;&nbsp;&nbsp;', 'div' => false, 'class' => 'input', 'options' => $months)); 

    echo $this->Form->end(); 

    ?> 
</div> 

Вот фактический HTML производства:

<div id="content"> 

         <script type="text/javascript" src="/js/revenuelines.js"></script> 

<h1>Lock revenue</h1> 

<div class="inner"> 

    <p>Select two dates to lock revenue for the 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 to 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> 

Answer 1

Да это !, код здесь:

JQuery demo here и код под:

$('#FinancialMonthSelector').on('change', function() { 
    var val = this.value; // get the value from this select 
    var parts = val.split("_"); // split the value on the "_" generating an array 
    $('#RevenueLineDate1').val(parts[0]); // give input LineDate1 the arrays first value 
    $('#RevenueLineDate2').val(parts[1]); // give input LineDate2 the arrays second value 
}); 

и в простом 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]; 
} 

Answer 2

Используйте событие изменения, а затем просто разделить на _ (проверка ошибок здесь не сделана)

$("#FinancialMonthSelector").change(function(){ 
    var value = $(this).val(); 
    var dates = value.split("_"); 
    $("#RevenueLineDate1").val(dates[0]); 
    $("#RevenueLineDate2").val(dates[1]); 
});