1

我有以下由 CakePHP 的表单助手生成的 HTML。在界面中，用户选择两个日期，然后在生成的 PHP 中使用这两个日期从 MySQL 中提取数据。我还为用户提供了“财务月份”，它们在 MySQL 中定义为预填充两个日期字段的快捷方式。但是，我完全不知道如何实现这一点，因为我的 jQuery/Javascript 知识非常有限。

我想要做什么：当用户从 SELECT 框中选择某些内容时，将 _ 之前的选项值拉入 date1，将 _ 之后的选项值拉入 date 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>
4

2 回答 2

3

是的！，代码在这里：

jQuery演示在这里和下面的代码：

$('#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 (演示)

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];
}
于 2013-07-31T11:39:00.567 回答
1

Use the change event, and then just split on _ (no error checking done here you can do that yourself)

$("#FinancialMonthSelector").change(function(){
  var value = $(this).val();
  var dates = value.split("_");
  $("#RevenueLineDate1").val( dates[0] );
  $("#RevenueLineDate2").val( dates[1] );
});
于 2013-07-31T11:36:09.823 回答