Question

我有一个标签，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欧元”
Premium =“€297 Quarterly”
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);
    });
});

Answer 1

我似乎对你的html结构有一个盲点，但我认为这就是你正在寻找的东西。它应该从select输入中找到当前选定的选项，将其文本分配给newVal变量，然后将该变量应用于value输入的#costLabel属性。 $(document).ready( function() { $('select[name=package]').change( function(){ var newText = $('option:selected',this).text(); $('#costLabel').text('Total price: ' + newText); } ); } );标签：

的jQuery

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

HTML：

{{1}}

上述工作演示：JS Bin

Answer 2

value（）更像是attr（'value'）的快捷方式。对于您的使用，请使用text()或html()代替

Answer 3

.text是正确的，以下代码适用于我：

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

Answer 4

验证（HTML5）：属性'name'不是元素'label'的有效属性。

使用jQuery更改标签的值

4 个答案:

的jQuery

HTML：