I am having issues changing some code to work on another area but slightly different.
The example in this jsFiddle http://jsfiddle.net/rgin/A8Nxp/354/ shows the original code but now I need it do something different
I have list of years so when one is selected I need to the price to appear in the empty textbox beside it. Each option has its own price.
<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>
EDIT price list
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
Just need help modifying the jQuery in the jsFiddle example to meet the needs above.
EDIT I can not change the value of the options as I am using Contact Form 7 plugin with wordpress. So require the prices to be in the jQuery. Example 01/02 selected £150 appears in text field.
1) I don't find any price value in your code.
2) But I think, you're trying to display the value of select
element in the textbox
.val()
Here I used to get the current value of the selected option/textbox.
change
Here I have binded the change
event with .on()
event Handler attachment like
$('select').on('change', function(){
$('#pricetwo').val($(this).val());
});
Here is the JSFiddle
Updates: The value of option, need not to be same as innerHTML.
so change the select values like this
<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>
Here is an updated fiddle
You have to set price in value
of each option
in drop-down
. for ex :
<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>
for more hits: click here
If you don't want to change your values, you could add an additional data-
attribute (HTML5)
HTML snippet
<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 );
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.