用javascript的下拉列表菜单中选中所需要运算的数值来实现简单的加法运算

本文介绍了一个使用HTML和JavaScript实现的简单计算器应用。该应用通过动态生成两个下拉菜单,并在用户选择数值后进行加法运算,最后显示计算结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


<!DOCTYPE html>

<html>
<head>
</head>

<body id="body" οnlοad="init();">

<select id="s1" size="10">
</select>


<input type="button" id="b" value="Plus" οnclick="cal();" /><br><br><br><br>

<div id="result">
</div>


<script type="text/javascript">

function init() {
	s1=document.getElementById("s1");

	s2=document.createElement("select");
	s2.setAttribute("id" , "s2");
	s2.setAttribute("size" , "10");
	body = document.getElementById("body");
	body.insertBefore(s2, document.getElementById("b"));

	for(i=0;i<1000;i++){
		option1 = document.createElement("option");
		option2 = document.createElement("option");
		option1.innerHTML = i;
		option2.innerHTML = i;
		s1.add(option1, null)
		s2.add(option2, null);
	}

	s1.options[5].selected = true;
	s2.options[5].selected = true;
	
}

function cal() {
	num1 = document.getElementById("s1").value;
	num2 = document.getElementById("s2").value;
	sum = parseInt(num1)+parseInt(num2);
	document.getElementById("result").innerHTML = num1 + "+" + num2 + "=" + sum;
}
</script>
</body>
</html>

### 解析 el-select 组件不回显 label 的解决方案 当遇到 `el-select` 组件无法正确显示选中项的标签(label)而只显示值(value)时,通常是因为以下几个方面的原因: - **数据类型不匹配**:如果 `v-model` 所绑定的数据类型与选项 (`el-option`) 中定义的 `value` 类型不符,则可能导致组件无法正常识别并渲染相应的 `label`[^5]。 #### 实现方式一:确保数据类型的统一性 为了使 `el-select` 正常工作,在设置初始值或动态更新其绑定变量时,应保证该变量存储的是与选项列表里相同的数值类型。例如,假设有一个对象数组作为下拉菜单源,并且每个条目的 ID 是字符串形式;那么用于表示当前选定项目的属性也应当是一个字符串而不是整数或其他任何形式。 ```html <template> <div class="example"> <!-- 确认 visibleForm.teamId 和 item.id 数据类型相同 --> <el-select v-model="visibleForm.teamId" placeholder="请选择团队" filterable clearable @change="handleChange"> <el-option v-for="(team, index) in teamList" :key="index" :label="team.name" :value="String(team.id)"> </el-option> </el-select> </div> </template> <script> export default { data() { return { visibleForm: { teamId: '' }, teamList: [ // 假设这里是从服务器获取到的数据... ] }; }, methods: { handleChange(value) { const selectedTeam = this.teamList.find((t) => String(t.id) === value); console.log('Selected Team Name:', selectedTeam ? selectedTeam.name : 'None'); } } }; </script> ``` 此代码片段展示了如何强制转换 `id` 到字符串来保持一致性,从而解决了因不同类型引起的显示问题。 #### 实现方式二:利用事件处理程序手动查找 Label 另一种方法是在每次选择发生变化时通过 JavaScript 来寻找对应的 `label` 并将其应用到界面上。这可以通过监听 `@change` 事件实现,并在回调函数内部执行必要的逻辑以检索所需的文本描述[^3]。 ```javascript // 方法 ElSelectChange 定义于 script 部分 ElSelectChange(val) { let foundItem = this.options.find(option => option.value.toString() === val.toString()); if (foundItem && foundItem.label !== undefined) { // 更新界面或者其他操作 console.info(`选择了 ${foundItem.label}`); } else { console.warn('未找到对应项'); } } ``` 这种方法适用于那些即使存在类型差异也能成功定位目标元素的情况,但它增加了额外的工作量并且可能不如直接修正根本原因那样高效。 综上所述,最推荐的做法还是确保所有涉及比较运算的地方都采用同一类别的数据格式,这样可以最大限度减少潜在错误的发生几率,同时也简化了开发过程中的调试难度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值