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

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

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

选定的选项价格总计并显示给用户

简单，只需：

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

然后您可以让浏览器处理表单值的提交。为此，每个select或任何表单元素必须是表单的子元素。您还可以定义表单应该将值发布到/

的位置

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

获得总数：

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

希望这会有所帮助。干杯

jQuery：选择选项 - 添加价格

3 个答案:

选定的选项价格总计并显示给用户

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