Question

我有一个注册表单，客户通过下拉列表选择所需的包裹。然后，他们通过选择是或否单选按钮来选择是否希望获得多年折扣。如果选择了是单选按钮，则会显示一个下拉列表（使用javascript），选择年份为1-3。我对javascript一点也不熟悉，接下来我需要做的是当客户选择第1年，第2年，3年多年折扣，计算这个折扣，并在下拉列表旁边的标签中显示或隐藏此标签客户选择了不到多年的折扣。

这是我现有的代码： Javascript隐藏年度折扣下拉列表

<script type='text/javascript'>

$(function(){

 $('#discountselection').hide();

    $('#No').click(function(){
        $('#discountselection').hide();
    });

    $('#Yes').click(function(){
        $('#discountselection').show();
    });

});

</script>

这是HTML代码：

        <td width="343">Package*</td>

        <td colspan="4">

        <select class="purple" name="package">

            <option value="Standard">Standard - &euro;55 Monthly</option>

            <option value="Premium" selected="selected">Premium - &euro;99 Monthly</option>

            <option value="Platinum">Platinum - &euro;149 Monthly</option>

        </select>

        </td>

        <tr>

        <td width="343">Would You like to avail of our multiyear discounts?*

        <br />See <a href="#dialog" name="modal">Pricing</a> for more details

        </td>

        <td colspan="4">

            <input name="discount" type="radio" id="Yes" value="Yes" />Yes

            <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  

            <select name="discountselection" class="purple" id="discountselection">

                <option value="1" selected="selected">1 Year</option>

                <option value="2">2 Years</option>

                <option value="3">3 Years</option>  

            </select>                  

        </td>

这将是我需要在javascript中执行以计算价格的IF语句：

if package == "standard" && discountselection == "1"
{
    cost = 45 * 12;
    //display cost in label
}   
elseif package == "standard" && discountselection =="2"
{
    cost = 45 * 24; 
    //display cost in label
}
elseif package == "standard" && discountselection =="3"
{
    cost = 45 * 36;
    //display cost in label
}
elseif package == "premium" && discountselection =="1"
{
    cost = 85 * 12; 
    //display cost in label
}
elseif package == "premium" && discountselection =="2"
{
    cost = 85 * 24;
    //display cost in label
}
elseif package == "premium" && discountselection =="3"
{
    cost = 85 * 36;
    //display cost in label
}
elseif package == "platinum" && discountselection =="1"
{
    cost = 134 * 12;
    //display cost in label 
}
elseif package == "platinum" && discountselection =="2"
{
    cost = 134 * 24;
    //display cost in label
}
else package == "platinum" && discountselection =="3"
{
    cost = 134 * 36;
    //display cost in label
}

我只是不确定如何在Javascript中创建这个IF语句。如果有人可以提供任何建议，帮助或链接到可以帮助我的教程，我将非常感激。

Answer 1

在javascript中，如果必须是单独的单词。在javascript中，if语句的条件必须或应该括在括号中。所以：

if(package == "standard" && discountselection == "1")
{
    cost = 45 * 12;
}   
else if(package == "standard" && discountselection =="2")
{
    cost = 45 * 24; 
}

等等。但是，如果我是你，我会考虑做一些更自动的事情。我讨厌重复打字！

var discount = {1: 12, 2: 24, 3: 36};

var package_prices = {'standard': 45, 'premium': 85, 'platinum': 134 };

var cost = package_prices[package] * discount[discountselection];

现在cost应该是正确的，看看你节省的所有努力。

注意：我已经按照您的示例代码进行了操作，但在实际的HTML中，您的选项值具有大写的第一个字符，因此实际上除非将package_prices变量修改为适合（例如'Standard': 45而不是'standard': 45）

如果您正在寻找有关Javascript的优秀参考资料，而不是更详细的教程，那么您不能比Mozilla Developer Center做得更好，例如这里是他们的if/else文档。

Answer 2

我希望我能正确理解您的问题，但如果用户从您的选择框中选择了一个值，您就会尝试显示带有费用的标签。

如果你可以通过使用更改事件（由jQuery提供）来完成此任务。

$("#discountselection").change(function()  { 
    var product_cat = $("#package option:selected").val();

    if(product_cat == "standard") {
       product_prefix = 45;
    } else if (product_cat == "premium") {
       product_prefix = 85;
    } else if (product_cat == "platinum") {
       product_prefix = 134;
    }

    var selected_value = $("#discountselection option:selected").val();
    var cost = product_prefix * (12 * selected_value);
    $("#costlabel").val(cost);
});

但请注意，您应该仔细检查服务器上的这些值！

javascript＆amp;中的“if”语句在标签中显示结果

2 个答案: