javascript - 下拉值填充输入框

标签 javascript jquery html css drop-down-menu

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

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

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

最佳答案

1) 我在你的代码中没有找到任何价格值。
2) 但我认为,您正试图在 textboxselect 元素中显示值。 p>

.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>

这是一个 updated fiddle

关于javascript - 下拉值填充输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18574176/

相关文章:

javascript - 数组中函数的上下文是什么?

javascript - HTML 表单发送错误的文件负载

php - MySQL 和 PHP 的问题

html - 如何将 td 内的 div 宽度设置为父级?

javascript - IE6兼容性。页面在任何地方都可以正常工作,但在 IE6 中

javascript - 无法使用 Angular Directive(指令)?

javascript - Jquery:隐藏空表行

php - 需要使用datatable jquery删除搜索字段

jquery - 如何在鼠标悬停时更改文本颜色

javascript - jQuery - 2 级 slider 通过单击返回到 1 级