javascript - IF && 语句 Javascript

Question

我希望有人能帮助我解决这个问题。我真的不知道该怎么做。我不知道在 javascript 中使用哪个函数。

我有一个名为:"request-a-load"

的表单

此表单有 10 个位置，可从下拉列表中选择。这个是:“加载位置”。

它还有一个下拉菜单可以选择“卡车尺寸”:小；中等的;重的。

最后一个下拉菜单是“Container Size”，有 2 个值:“20' Container；40' Container”。

在可以选择的 10 个装载位置中，有 3 个永远不会使用“小型”或“中型”卡车。 “加载地点”的这 3 个值是:“伦敦；曼彻斯特；利物浦；” (只是一个例子)

这是需要发生的事情:

如果“装货地点”不是“伦敦”、“曼彻斯特”，则“容器尺寸”显示为“20'容器”， “Liverpool” AND “Truck Size” 是“Small” OR “Medium”

它还必须:

如果“装货地点”不是“伦敦”、“曼彻斯特”，则将“容器尺寸”显示为“40'容器”， “Liverpool”和“Truck Size”是“Heavy”。

我的错误代码:

$("div.trucksize").change(function () {
                if ($(this).val() == "Small - 5 tons") {
                    $("div.containersize").val("20' Container");
                }
                if ($(this).val() == "Medium - 10 tons") {
                    $("div.containersize").val("20' Container");
                }
                  
                if ($(this).val() == "Heavy - 24 tons" && ($("div.loadingplace").val() != ["London", "Manchester", "Liverpool"]  {
                    $("div.containersize").val("40' Container");
                }
         
            });

我希望有人能帮助我。

感谢您的宝贵时间。

Answer 1

也许您使用的库为 div 元素提供下拉行为，因为在标准 HTML 中 div 元素不会生成 change 事件.所以在下面的代码片段中，我将使用 select 元素。

您的代码中的一些问题:

• 要检查字符串是否出现在数组中，您不能只与 != 进行比较，而应该使用 indexOf() 或 includes( ) 在现代浏览器中；
• 您不仅应响应卡车尺寸选择的变化，还应响应位置选择，因为这也可能影响容器尺寸的最终值；
• 您对城市所做的检查似乎在错误的地方，因为您写道这些城市从不使用“小型”或“中型”。因此，当选择那些“小”或“中”值时，您需要进行城市检查——这表明违反了规则；
• 当选择这三个城市之一时，您可以强制卡车尺寸为“重型”，因为在这些情况下这似乎是唯一允许的值(尽管您问题中的信息与 “它还必须”部分)；
• 我猜您还想将容器大小下拉列表设置为只读，以避免用户覆盖自动逻辑。

$('select.loadingplace,select.trucksize').change(function () {
    if ($('select.trucksize').val() == 'Heavy - 24 tons' || 
            ["London", "Manchester", "Liverpool"].indexOf($('select.loadingplace').val()) > -1) {
        $('select.containersize').val("40' Container");
        $('select.trucksize').val('Heavy - 24 tons');
    } else {
        $('select.containersize').val("20' Container");
    }    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Loading Places: 
<select class="loadingplace">
<option value="Birmingham">Birmingham</option>
<option value="Leeds">Leeds</option>
<option value="Liverpool">Liverpool</option>
<option value="London">London</option>
<option value"Manchester">Manchester</option>
</select>
<br>
Truck Size: 
<select class="trucksize">
<option value="Small - 5 tons">Small - 5 tons</option>
<option value="Medium - 10 tons">Medium - 10 tons</option>
<option value="Heavy - 24 tons">Heavy - 24 tons</option>
</select>
<br>
Container Size: 
<select class="containersize" disabled>
<option value="20' Container">20' Container</option>
<option value="40' Container">40' Container</option>
</select>