Question

我有CakePHP表单助手生成的以下HTML。在界面中，用户选择两个日期，然后在生成的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] );
});

如何从一个选择下拉列表中填充两个文本字段

2 个答案: