0

我在更改某些代码以在另一个领域工作但略有不同时遇到问题。

这个 jsFiddle http://jsfiddle.net/rgin/A8Nxp/354/中的示例显示了原始代码，但现在我需要它做一些不同的事情

I have list of years so when one is selected I need to the price to appear in the empty textbox beside it. 每个选项都有自己的价格。

<div align="right">Year Required </div>
</td>
<td><span class="wpcf7-form-control-wrap years-required"><select name="years-required"       class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true">   
<option value="">---
</option><option value="00/01">00/01</option>
<option value="01/02">01/02</option>
<option value="02/03">02/03</option>
<option value="03/04">03/04</option>
<option value="04/05">04/05</option>
<option value="05/06">05/06</option>
<option value="06/07">06/07</option>
<option value="07/08">07/08</option>
<option value="08/09">08/09</option>
<option value="09/10">09/10</option>
<option value="10/11">10/11</option>
<option value="11/12">11/12</option>
<option value="12/13">12/13</option>
</select></span>  <span class="wpcf7-form-control-wrap price">
<input type="text" name="price" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="pricetwo" aria-required="true" />
</span></td>

编辑价目表

01/02 - 150 英镑

02/03 - 135 英镑

03/04 - 120 英镑

04/05 - 105 英镑

05/06 - 90 英镑

06/07 - 75 英镑

07/08 - 65 英镑

08/09 - 64 英镑

09/10 - 63 英镑

10/11 - 62 英镑

11/12 - 61 英镑

12/13 - 60 英镑

只需要帮助修改 jsFiddle 示例中的 jQuery 即可满足上述需求。

编辑我无法更改选项的值，因为我正在使用带有 wordpress 的 Contact Form 7 插件。所以要求价格在 jQuery 中。Example 01/02 selected £150 出现在文本字段中。

4

3 回答 3

2

1）我在您的代码中找不到任何价格价值。
2）但我认为，您正试图select在textbox

.val()在这里，我用来获取所选选项/文本框的当前值。

change在这里，我已将change事件与.on()事件处理程序附件绑定，例如

$('select').on('change', function(){
    $('#pricetwo').val($(this).val());
});

这是JSFiddle

更新： option 的值，不需要和innerHTML 一样。

所以像这样改变选择值

  <option value="">---</option>
    <option value="1">00/01</option>
    <option value="2">01/02</option>
    <option value="3">02/03</option>
    <option value="4">03/04</option>
    <option value="5">04/05</option>
    <option value="6">05/06</option>
    <option value="7">06/07</option>
    <option value="8">07/08</option>
    <option value="9">08/09</option>
    <option value="10">09/10</option>
    <option value="11">10/11</option>
    <option value="12">11/12</option>
    <option value="13">12/13</option>

这是一个更新的小提琴

于 2013-09-02T13:17:12.483 回答
0

您必须在value每个option中设置价格drop-down。例如：

<select name="years-required" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true">   
<option value="">---</option>
<option value="£150">01/02</option>
<option value="£135">02/03</option>
<option value="£120">03/04</option>
<option value="£105">04/05</option>
<option value="£90">05/06</option>
<option value="£75">06/07</option>
<option value="£65">07/08</option>
<option value="£64">08/09</option>
<option value="£63">09/10</option>
<option value="£62">10/11</option>
<option value="£61">11/12</option>
<option value="£60">12/13</option>
</select>

更多点击：点击这里

于 2013-09-02T13:24:31.267 回答
0

如果您不想更改您的值，您可以添加一个附加data-属性 (HTML5)

HTML 片段

<option data-price="£11.99" value="1">1</option>
<option data-price="£12.99" value="2">2</option>
and so on...

查询：

$('#payslips-required').change(function(){
    var selected = $(this).find('option:selected');
    var price = selected.data('price');
    $('#price').val( price );
});
于 2013-09-02T13:26:18.567 回答