web-dev-qa-db-ja.com

jQueryを使用してラベルの値を変更する

CostLabelというラベルがあります。

私ができるようにしたいのは、ドロップダウンリストの選択した値に応じてこのラベルの値を変更することです。

これは私のHTMLです：

<table>
  <tr>
    <td width="343">Package*</td>

    <td colspan="4">
      <select class="purple" name="package">
        <option value="standard">Standard - &euro;55 Monthly</option>
        <option value="standardAnn">Standard - &euro;49 Monthly</option>            
        <option value="premium">Premium - &euro;99 Monthly</option>
        <option value="premiumAnn" selected="selected">Premium - &euro;89 Monthly</option>            
        <option value="platinum">Platinum - &euro;149 Monthly</option>
        <option value="platinumAnn">Platinum - &euro;134 Monthly</option>            
      </select>
    </td>

  <tr>
    <td width="343">
      <p>We bills quarterly/annually in advance</p>
      <p>See <a href="#dialog" name="modal">Pricing</a> for more details</p>
    </td>
    <td colspan="4"><label id="costlabel" name="costlabel">Total Cost:</label></td>

  <tr>
</table>

コストラベルに入る値は次のとおりです。

  • 標準=「四半期165ユーロ」
  • StandardAnn = "年間588ユーロ"
  • プレミアム=「四半期€297」
  • PremiumAnn = "年間€1068"
  • プラチナ=「四半期€447」
  • PlatinumAnn = "年間€1608"

ドロップダウンメニューに応じてコストを計算する次のコードを用意しましたが、登録フォームがよりシンプルに変更された（つまり、割引選択がなくなっていない）ため、jQueryの調整に少し苦労しています。誰か助けてもらえますか？

$(function() {
  $("#discountselection, select[name=package], input[name=discount]").
    change(function() {
      var
        selected_value = $("#discountselection").val(),
        discount = [12, 24, 36],
        package = $("select[name=package]").val(),
        package_prices = {'standard': 49, 'premium': 85, 'platinum': 134 },
        cost = package_prices[package] * discount[selected_value-1];

      $("#costlabel").val(cost);
    });
});
jquerydrop-down-menu
20
109221793

私はあなたのhtml構造に関して盲点を持っているようですが、私はこれがあなたが探しているものだと思いますと思います。 select入力から現在選択されているオプションを見つけ、そのテキストをnewVal変数に割り当て、thenその変数を#costLabelラベルのvalue属性に適用します。

jQuery

$(document).ready(
  function() {
    $('select[name=package]').change(
      function(){
        var newText = $('option:selected',this).text();
        $('#costLabel').text('Total price: ' + newText);
      }
      );
  }
  );

html：

  <form name="thisForm" id="thisForm" action="#" method="post">
  <fieldset>
    <select name="package" id="package">
        <option value="standard">Standard - &euro;55 Monthly</option>
        <option value="standardAnn">Standard - &euro;49 Monthly</option>            
        <option value="premium">Premium - &euro;99 Monthly</option>
        <option value="premiumAnn" selected="selected">Premium - &euro;89 Monthly</option>            
        <option value="platinum">Platinum - &euro;149 Monthly</option>
        <option value="platinumAnn">Platinum - &euro;134 Monthly</option>   
    </select>
  </fieldset>

    <fieldset>
      <label id="costLabel" name="costLabel">Total price: </label>
    </fieldset>
  </form>

上記の作業デモ： JS Bin

29
David Thomas

val（）は、attr（ 'value'）のショートカットに似ています。使用する場合は、代わりに text（） または html（） を使用してください

4
sod

.textは正しい、次のコードは私のために働く：

$('#lb'+(n+1)).text(a[i].attributes[n].name+": "+ a[i].attributes[n].value);
1
orca

検証（HTML5）：属性 'name'は、要素 'label'の有効な属性ではありません。

0
user1633617