使用javascript求和表单（FORM）中的SELECT/OPTION；这里使用了“getElementsByTagName”让JS自动获取了SELECT选中的值做计算。
代码如下：
测试效果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单中用JS使SELECT/OPTION求和 - 028工作室</title>
<script type="text/javascript">
function calc() {
document.getElementById('count').innerHTML = parseInt
(document.getElementsByTagName('select')[0].value) * 1 + parseInt
(document.getElementsByTagName('select')[1].value) * 1;
}
</script>
</head>
<body>
<div class="dinggou">
<p>第一个选项:
<select name="c-d" onchange="calc()">
<option value="0">0</option>
<option value="-5000">-500</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="25000">20000</option>
</select>
第二个选项：
<select name="e-d" onchange="calc()">
<option value="0">0</option>
<option value="30000">30000</option>
<option value="50000">50000</option>
<option value="80000">80000</option>
</select></p>
</div>
<p style="color:#168cbe;">总价格:￥<strong id="count">选择后会自动出现价格
</strong></p>
</body>
</html>
分享到：
相关推荐
### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中，`<select>` 元素是一种常见的表单控件，用于收集用户输入的选择项。它通常包含多个 `<option>` 子元素供用户选择。通过 JavaScript，我们可以实现...
在JavaScript编程中，动态生成`select`元素中的`option`是一项常见的需求，特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，同时结合提供的`autoSelect.html`和`autoselect.txt`...
DWR 处理各种 form 表单 Select/option,table ...DWR 的 util.js 文件提供了一些有用的函数，用于处理各种 form 表单 Select/option 和 table。开发者可以根据需要选择合适的函数，快速地实现所需的功能。
### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时，经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能： ```javascript ...
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel"); ``` 使用jQuery可以方便地创建并添加新的`<option>`元素到下拉列表中。 2. **清空下拉列表的所有选项**： ```...
$selectBox.append('<option value="newValue">New Option</option>'); $selectBox.find('option[value="oldValue"]').remove(); ``` 在提供的压缩包文件中，有三个关于JQuery操作`select`的HTML文档：`JQuery操作...
在JavaScript编程中，当涉及到用户交互，特别是在HTML表单元素如`<select>`下拉列表中，有时我们需要监听用户选择的`<option>`项并触发相应的事件。由于`<option>`元素本身不支持直接绑定事件，因此我们通常会在其父...
在网页开发中，select元素是常用的表单元素之一，用于提供一个下拉列表供用户选择。通过JavaScript可以动态地对select元素内的option属性进行更改，实现更加动态和丰富的用户交互体验。本文详细介绍了如何使用...
<option>张三</option> <option>李四</option> <option>王二</option> </select> ``` 这会生成一个下拉列表，用户可以选择"张三"、"李四"或"王二"。 2. **多选模式** 若要使用户可以同时选择多个选项，可以...
js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效
复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....
在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的双Select框多选表单，以便用户可以方便地在两个下拉列表之间选择和移动选项，并在提交表单时发送选定的数据。jQuery是一个强大的JavaScript库，它简化...
<option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> ``` ### 2. 属性 #### (1) `size` `size`属性用于设置下拉列表中可见的选项数量。默认情况下，下拉列表只显示一个选项...
$('#select2').append('<option value="a">子选项A</option>'); break; case '2': $('#select2').append('<option value="b">子选项B</option>'); break; case '3': $('#select2').append('<option value="c...
<option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> ``` 每个`<option>`标签代表一个可选项，用户只能在这些选项中进行选择。 **属性说明：** 1. **`<select>` 标签属性：...
### JavaScript操作表单Select元素的常用步骤 在Web开发中，`<select>`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为，例如添加、删除或修改选项等。下面详细介绍如何...
<option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> ``` 2. 设置默认选中项 如果要设置默认选中项，可以使用`...
总结，`select`元素在JavaScript中是不可或缺的一部分，尤其在表单提交和用户交互场景中。通过熟练掌握它的用法和相关事件处理，可以构建更丰富、更具有交互性的网页应用。希望这个详解能帮助你理解和运用`select`...
<option value=1>数字1</option> <option value=2>数字2</option> </select> $(#numbers option:selected).val(); 获取到下拉框被选中的optionde value值：2； $(#numbers option:selected).text(); 获取到...