使用下拉菜单和Javascript切换功能控制页面元素的显示

Question

I need to include a dropdown on a page to control the display of prices in different currencies. 我需要在页面上添加一个下拉列表，以控制不同货币的价格显示。 I don't need to do currency conversion on the fly. 我不需要即时进行货币换算。

I was hoping to set up some spans, each containing value for a particular currency, and have dropdown on the page. 我希望设置一些跨度，每个跨度包含特定货币的值，并在页面上具有下拉菜单。 When a user selects a currency, the javascript makes sure the correct span is showing, and hides all the others. 当用户选择一种货币时，JavaScript会确保显示正确的跨度，并隐藏所有其他跨度。

so far I have got the following but can't get it to work :( any hints on where I am going wrong? 到目前为止，我已经获得了以下内容，但无法正常工作:(关于我要去哪里的任何提示吗？

<!DOCTYPE html>
<html>
<head>
<style>
#CAD {
display:show;
}

#USD, #EUR, #GBP, #ANG {
display:none
} 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>  
</head>
<body>
<select id="currency">
<option value="0">CAD</option>
<option value="1">USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
<option value="4">ANG</option>

</select>


<span id="CAD">CAD $100</span>
<span id="USD">USD $200/span>
<span id="EUR">EUR €300</span>
<span id="GBP">GBP £400</span>
<span id="ANG">ANG ƒ500</span>
<script>
$('#purpose').on('change', function () {
switch (this.value) {
case 0:
    $("#CAD").show();
    $("#USD").hide();
    $("#EUR").hide();
    $("#GBP").hide();
    $("#ANG").hide();
    break;
case 1:
    $("#CAD").hide();
    $("#USD").show();
    $("#EUR").hide();
    $("#GBP").hide();
    $("#ANG").hide();
    break;
case 2:
    $("#CAD").hide();
    $("#USD").hide();
    $("#EUR").show();
    $("#GBP").hide();
    $("#ANG").hide();
    break;
case 3:
    $("#CAD").hide();
    $("#USD").hide();
    $("#EUR").hide();
    $("#GBP").show();
    $("#ANG").hide();
    break;
case 4:
    $("#CAD").hide();
    $("#USD").hide();
    $("#EUR").hide();
    $("#GBP").hide();
    $("#ANG").show();

}


});
</script>   
</body>
</html>

Answer 1

$(function(){
        $('.currency').hide();
        $('#currency').on('change', function () {
            $('.currency').removeClass('active');
            $('.currency').hide();

            $('#'+$(this).val()).addClass('active');

            $('span.active').fadeIn();
        });
    });

HTML code; HTML代码；

<select id="currency">
    <option value="CAD">CAD</option>
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="GBP">GBP</option>
    <option value="ANG">ANG</option>

</select>

<span id="CAD" class="currency">CAD $100</span>
<span id="USD" class="currency">USD $200</span>
<span id="EUR" class="currency">EUR €300</span>
<span id="GBP" class="currency">GBP £400</span>
<span id="ANG" class="currency">ANG ƒ500</span>

Answer 2

There are few issues in you code : 您的代码中有几个问题：

1.span tag not closed : 1.span标签未关闭：

<span id="USD">USD $200/span> // worng
<span id="USD">USD $200</span> // Correct

Wrong id of dropdown used : 使用的下拉菜单ID错误：

 <select id="currency"> // id of dropdown $('#purpose').on('change', function () { }); // wrong id used $('#currency').on('change', function () { }) // correct id

3 . 3。

    switch (this.value) // wrong
    switch ($(this).value) // correct

Use break here : 在此处使用break：
case 4: $("#CAD").hide(); 情况4：$（“＃CAD”）。hide（）; $("#USD").hide(); $（ “＃USD”）隐藏（）。 $("#EUR").hide(); $（ “＃EUR”）隐藏（）。 $("#GBP").hide(); $（ “＃GBP”）隐藏（）。 $("#ANG").show(); $（ “＃ANG”）显示（）。 break; 打破;

使用下拉菜单和Javascript切换功能控制页面元素的显示

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-08-19 13:44:03

解决方案2
0 2017-08-19 13:51:40

使用下拉菜单和Javascript切换功能控制页面元素的显示

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-08-19 13:44:03

解决方案2 0 2017-08-19 13:51:40

解决方案1
1 已采纳 2017-08-19 13:44:03

解决方案2
0 2017-08-19 13:51:40