Question

我需要在页面上添加一个下拉列表来控制不同货币的价格显示。我不需要动态进行货币兑换。

我希望设置一些跨度，每个跨度包含特定货币的值，并在页面上有下拉列表。当用户选择货币时，javascript会确保显示正确的范围，并隐藏所有其他货币。

到目前为止，我已经得到了以下内容但无法使其发挥作用:(任何有关我出错的提示？

<!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;

<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

您的代码中存在一些问题：

1.span标签未关闭：

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

使用的下拉列表ID错误：

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


$('#currency').on('change', function ()
{
}) // correct id

3。

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

在这里使用break：

案例4： $（ “＃CAD”）隐藏（）。 $（ “＃USD”）隐藏（）。 $（ “＃EUR”）隐藏（）。 $（ “＃GBP”）隐藏（）。 $（ “＃ANG”）显示（）。打破;

使用下拉菜单和Javascript开关功能来控制页面元素的显示

2 个答案: