<label class="col-sm-1 col-form-label label_a">计价货币:</label> <div class="col-sm-2"> <select id="denominationCurrency" name="denominationCurrency" class="form-control select2bs4"> <#list allDenominationCurrencys as k,v> <option value="${k}">${v}</option> </#list> </select> </div>change事件改变其他元素的值
时间: 2023-07-19 07:32:32 浏览: 40
好的,你可以通过以下代码来实现计价货币选择框的change事件,当用户选择不同的计价货币后,将其他元素的值进行相应的更改:
```javascript
// 获取计价货币选择框元素
var selectBox = document.getElementById('denominationCurrency');
// 给选择框添加change事件监听器
selectBox.addEventListener('change', function() {
// 获取当前选择的计价货币的值
var currencyValue = selectBox.value;
// 根据选择的计价货币更新其他元素的值
if (currencyValue === 'USD') {
// 如果选择的是美元,将其他元素的值设置为对应的美元值
document.getElementById('price').textContent = '$10';
document.getElementById('tax').textContent = '$1';
} else if (currencyValue === 'EUR') {
// 如果选择的是欧元,将其他元素的值设置为对应的欧元值
document.getElementById('price').textContent = '€9';
document.getElementById('tax').textContent = '€0.9';
} else {
// 如果选择的是其他货币,将其他元素的值设置为对应的其他货币值
document.getElementById('price').textContent = '10' + currencyValue;
document.getElementById('tax').textContent = '1' + currencyValue;
}
});
```
在这段代码中,我们首先获取了计价货币选择框元素,并给它添加了change事件监听器。在监听器内部,我们通过获取当前选择的计价货币的值来更新其他元素的值。如果选择的是美元或欧元,我们就将其他元素的值设置为对应的美元或欧元值,否则就设置为对应的其他货币值。通过这种方式,我们就可以根据用户选择的不同的计价货币来更新页面上的其他元素值。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
請你幫我打修改HTML代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <style> .main { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } </style> </head> <body> 首页 登记数据 查询数据 异常记录登记 <form method="post" action="/submit"> <label>确认线别:</label> <input type="text" name="line">
<label>确认日期:</label> <input type="date" name="date">
<label>异常机种:</label> <input type="text" name="model">
<label>异常现象:</label> <textarea name="issue"></textarea>
<label>生产日期:</label> <input type="date" name="prod_date">
<label>生产班别:</label> <input type="text" name="shift">
<label>生产线别:</label> <input type="text" name="prod_line">
<label>责任人:</label> <input type="text" name="responsible">
<input type="submit" value="提交"> </form> 欢迎访问 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
样式优化美化<!DOCTYPE html> {% load static %} <html> <head> <title>个人中心</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .module { width: calc(25% - 20px); margin-bottom: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } @media (max-width: 768px) { .module { width: calc(50% - 20px); } } @media (max-width: 480px) { .module { width: 100%; } } </style> </head> <body> 个人信息 <form> <label for="username">用户名:</label> <input type="text" id="username"> <label for="email">邮箱:</label> <input type="email" id="email"> <button type="submit">保存</button> </form> 修改密码 <form> <label for="old-password">旧密码:</label> <input type="password" id="old-password"> <label for="new-password">新密码:</label> <input type="password" id="new-password"> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password"> <button type="submit">保存</button> </form> 绑定手机 <form> <label for="phone">手机号:</label> <input type="tel" id="phone"> <button type="submit">保存</button> </form> 我的消息 系统消息1 系统消息2 好友消息1 好友消息2 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)