Question

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

此jsFiddle http://jsfiddle.net/rgin/A8Nxp/354/中的示例显示了原始代码，但现在我需要它执行不同的操作

我有年份列表，所以当选择一个时，我需要将价格显示在它旁边的空文本框中。每个选项都有自己的价格。

<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以满足上述需求。

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

Answer 1

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

中显示 textbox 元素的值

.val() 此处我曾获取所选选项/文本框的当前值。

change 我已将change事件与 .on() 事件处理程序附件捆绑在一起，如

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

以下是JSFiddle

更新：选项的值，不必与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>

这是 updated fiddle

Answer 2

您必须在value中的每个option的{{1}}中设置价格。例如：

drop-down

更多点击次数：click here

Answer 3

如果您不想更改值，可以添加其他data-属性（HTML5）

HTML片段

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

JQuery的：

$('#payslips-required').change(function(){
    var selected = $(this).find('option:selected');
    var price = selected.data('price');
    $('#price').val( price );
});

下拉值填充输入框

3 个答案: