jQuery：选择选项 - 添加价格

Question

我是编码新手。我有一个由两部分组成的问题：

1.假设我有：

#html    
<style>
    <option value="1"> Red Box </option>
    <option value="2"> Green Box </option>
    <option value="3"> Blue Box </option>
</style>
<style>
    <option value="4"> Red Circle</option>
    <option value="5"> Green Circle</option>
    <option value="6"> Blue Circle</option>
</style>

为每个选项分配美元值以便可以在 jQuery 中计算该值的最佳方法是什么？

2.如何使用 jQuery 来创建这些结果： * 所选选项价格总计并显示给用户 * 用户可以选择“提交选项”

Answer 1

所选选项的价格将被总计并显示给用户

简单，只需执行以下操作：

  var total = 0;
  $('select').each(function() {
      // Convert val from string to integer, so it isn't cocantenated.
      total += parseInt($(this).val());
  });
 alert('Total is: ' + total);

用户可以选择“提交选项”

那么您通常需要一个提交按钮：

<input type="submit" value="Submit" name="submit"/>

然后您可以让浏览器处理表单值的提交。为此，每个选择或任何表单元素都必须是表单的子元素。您还可以定义表单应在何处发布/获取值。

<form name="shapes" action="/form-handler.php" method="post">
  <!-- your select elements here !-->
</form>

如果您希望正确提交表单中的每个元素，则必须具有名称属性。

如果您希望 jQuery 通过 ajax 提交表单，您可以使用漂亮的 serialize

 $('[name=shapes]').serialize();

这会将表单值转换为用于发布的查询字符串。有关此函数的详细信息，请参阅 http://api.jquery.com/serialize/。

Answer 2

为每个选项分配美元值的最佳方法是使用选项标签的值键。它会是这样的：

#html    
<select> <!-- I'm assuming you meant a select-tag here not a style-tag -->
    <option value="5"> Red Box </option>
    <option value="8"> Green Box </option>
    <option value="1"> Blue Box </option>
</select>
<select>
    <option value="6"> Red Circle</option>
    <option value="3"> Green Circle</option>
    <option value="1"> Blue Circle</option>
</select>

你的 jQuery 代码可以是这样的：

var total = $('select:first').attr('value') + $('select:last').attr('value');

Answer 3

获得总数：

<script>
  $(document).ready(function(){
    alert( $('select:first').val() + $('select:last').val() );
  });
</script>

希望这有帮助。干杯