0

一部のコードを別の領域で動作するように変更する際に問題がありますが、わずかに異なります。

この jsFiddle http://jsfiddle.net/rgin/A8Nxp/354/の例は元のコードを示していますが、今は別のことをする必要があります

私は年のリストを持っているので、1 つを選択すると、その横の空のテキスト ボックスに価格を表示する必要があります。各オプションには独自の価格があります。

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

価格表を編集

2002 年 1 月 - £150

2003 年 2 月 - £135

04/03 - £120

05/04 - £105

05/06 - £90

06/07 - £75

08/07 - £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 が表示されます。

4

3 に答える 3

2

1) コードに価格の値が見つかりません。2)しかし、要素
の値を表示しようとしていると思いますselecttextbox

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

ここに更新されたフィドルがあります

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

JQuery:

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