javascript - 如何根据选择标签的选定选项的值为变量分配新值,检索并使用变量的新值?
问题描述
我正在构建一个表单,用户可以在其中选择他们想要更改的货币,当他们选择货币时,它会反映金额标签旁边的货币符号。我想在页面上显示所选货币符号的 STRING 等价物,但我不知道如何在 javascript 中实现这一点。
https://www.w3schools.com/code/tryit.asp?filename=G89PFIUW1OUC
上面是我正在尝试做的代码游乐场链接,我已经编写了 jquery 代码来交替选择选项的值并在 Amount 标签旁边显示选项的值,如果我注释掉函数它工作正常它比较选项值的值并将新值分配给 stringcurr 变量。我不知道我做错了什么,所以我需要帮助。
<div class="col-md-3">
<span class="color-bold">Cash Back Exchange Currency<span style="color:red;">*</span></span>
<select class="form-control" id="currSelect">
<option value="">Select currency</option>
<option value="$"> United States Dollars (USD) </option>
<option value="£"> Great Britain Pounds (GBP) </option>
<option value="€"> European Euro (EUR) </option>
</select>
</div>
<div class="col-md-3">
<label class="color-bold">Amount - <span id="curr"></span> <span style="color:red;">*</span></label>
<input name="forexamount" id="forexamount" class="common" type="number" placeholder="Eg. 200">
</div>
<div id="stringcurr"></div>
JS
<script>
var intcurr;
var currencysymbol = "";
$("#currSelect")
.change(function() {
$("#currSelect option:selected").each(function() {
currencysymbol = $(this).val();
});
$("#curr").text(currencysymbol /* .substring(1,0) */ );
(function(currencysymbol) {
if (currencysymbol != "") {
if (currencysymbol == "$") {
return intcurr = "USD";
} else if (currencysymbol == "£") {
return intcurr = "GBP";
} else if (currencysymbol == "€") {
return intcurr = "EUR";
} else {
return false
}
$("#stringcurr").text(intcurr);
})();
change();
});
</script>
如果所选选项的值为 $charset 或 GBP,我希望 stringcurr div 显示美元,如果所选选项的值为 £charset 等,则通过将字符串分配给 intcurr 变量。
解决方案
一种更简单的方法是为每个<option>
具有货币文本值的数据属性添加一个数据属性,并使用 jQuerydata()
来访问它们。
您还需要链接change()
页面加载的方法触发器
$("#currSelect").change(function() {
// get selected data or make it empty string if undefined
var curr = $(this).find(':selected').data('curr') || '';
$('#curr, #stringcurr').text(curr);
// trigger event on page load
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
<span class="color-bold">Cash Back Exchange Currency<span style="color:red;">*</span></span>
<select class="form-control" id="currSelect">
<option value="">Select currency</option>
<option value="$" data-curr="USD"> United States Dollars (USD) </option>
<option value="£" data-curr="GBP"> Great Britain Pounds (GBP) </option>
<option value="€" data-curr="EUR"> European Euro (EUR) </option>
</select>
</div>
<div class="col-md-3">
<label class="color-bold">Amount - <span id="curr"></span> <span style="color:red;">*</span></label>
<input name="forexamount" id="forexamount" class="common" type="number" placeholder="Eg. 200">
</div>
<div id="stringcurr"></div>
推荐阅读
- php - 请帮我解决 mkdir() 问题。在我的 wordpress 网站上
- react-native - 反应原生配置 - 设置 .env
- meteor - 使用浏览器“后退”按钮时,select2 下拉菜单保持打开状态
- excel - 使用条件和日期范围列出 excel 范围内的所有值
- android - 先前声明的权限(2 个权限) google play app 发布
- android - 当我将 postDelayed 时间设置为 25 天以上时,Runnable 会以毫秒为单位连续调用
- ios - 如何使用物镜 C 以 120 fps 或 240 fps 录制视频
- ssh - PHP输出在终端中正确但在浏览器中不正确
- python - 使用 cURL 或 Python 让 Google Cloud Text to Speech 工作
- angularjs - Angular JS - Rest API - 从浏览器发送但在服务器中未收到的授权