[英]Drop down value populate input box
我有問題更改一些代碼以在另一個區域工作,但略有不同。
這個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)但我認為,你試圖在textbox
顯示select
元素的值
.val()
這里我用來獲取所選選項/文本框的當前值 。
change
在這里,我已使用.on()
事件處理程序附件綁定了change
事件
$('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>
這是一個更新的小提琴
你必須設置價格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>
更多點擊: 點擊這里
如果您不想更改值,可以添加其他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 );
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.