Question

现在我的网页上有一个javascript块，它会显示用户从下拉菜单中选择的div，并隐藏当前未选中的其他内容。它目前有效，但在我的chrome开发者控制台中引发了错误。我想清理它以确保它没有抛出错误。

错误

Uncaught TypeError: Cannot read property 'toLowerCase' of null
**javascript**

JS

$(function() {
   $('#loan_application_requested_purpose').on("change",function(){
     $(".loan_purpose").hide();
     // change all spaces to underscore and grab the first part of Expansion/
     var $div = $("#"+$(this).val().toLowerCase().replace(/ /g,"_").split("/")[0]);
     if ($div.length>0) $div.show();
     else $("#other").show(); 
     }).change(); // run change on load to show relevant already selected
});

HTML

<select id="loan_application_requested_purpose" name="loan_application[requested_purpose]" class="valid">
    <option disabled="disabled" selected="selected" value=""></option>
    <option value="Contract Bid">Contract Bid</option>
    <option value="Equipment Purchase">Equipment Purchase</option>
    <option value="Hiring Employees">Hiring Employees</option>
    <option value="Inventory Purchase">Inventory Purchase</option>
    <option value="Marketing">Marketing</option>
    <option value="Refinancing">Refinancing</option>
    <option value="Expansion/Renovation">Expansion/Renovation</option>
    <option value="Working Capital">Working Capital</option>
    <option value="Other">Other</option>
</select>

Answer 1

请仔细阅读错误消息：

Uncaught TypeError: Cannot read property 'toLowerCase' of null

这清楚地表明在某些情况下$(this).val()的结果为null。

jQuery documentation描述了可能发生这种情况的单一案例：

如果是select元素，则在未选择任何选项时返回null

这包括您列出的空值的选项。也许你应该首先尝试检索值，然后在执行其他操作之前检查null。

Answer 2

问题是禁用的第一个值。它返回null，因为无法选择它。

将其更改为不被禁用或将脚本更改为

$(function() {
   $('#loan_application_requested_purpose').on("change",function(){
     $(".loan_purpose").hide();
     // change all spaces to underscore and grab the first part of Expansion/
     var val = $(this).val();
     var $div = val?$("#"+val.toLowerCase().replace(/ /g,"_").split("/")[0]):$("#other");
     if ($div.length) $div.show(); 
   }).change(); // run change on load to show relevant already selected
});

显示在下拉列表中选择的div并使用javascript隐藏其他div

2 个答案: