web-dev-qa-db-fra.com

Utilisez jQuery pour modifier la valeur d'une étiquette

J'ai une étiquette, costLabel.

Ce que je veux pouvoir faire, c'est changer la valeur de cette étiquette en fonction de la valeur sélectionnée d'une liste déroulante.

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

Les valeurs qui entrent dans l'étiquette de coût sont

  • Standard = "165 € par trimestre"
  • StandardAnn = "588 € par an"
  • Premium = "297 € trimestriel"
  • PremiumAnn = "1068 € par an"
  • Platine = "447 € trimestriel"
  • PlatinumAnn = "1608 € par an"

J'avais en place le code suivant qui calculait le coût en fonction du menu déroulant, mais le formulaire d'inscription a depuis changé pour être plus simple (c'est-à-dire que la sélection des remises n'a pas disparu), et j'ai un peu de mal à adapter jQuery. Quelqu'un peut-il aider?

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

Il me semble avoir un angle mort en ce qui concerne votre structure html, mais je pense que c'est ce que vous recherchez. Il devrait trouver l'option actuellement sélectionnée dans l'entrée select, affecter son texte à la variable newVal et puis appliquer cette variable à l'attribut value de #costLabel label:

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>

Démonstration de travail de ce qui précède à: JS Bin

29
David Thomas

val () ressemble plus à un raccourci pour attr ('value'). Pour votre utilisation, utilisez plutôt text () ou html ()

4
sod

.text est correct, le code suivant fonctionne pour moi:

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

Validation (HTML5): l'attribut 'nom' n'est pas un attribut valide de l'élément 'étiquette'.

0
user1633617