javascript - 尝试在页面加载时运行函数

Question

我有一个自定义函数，一旦我从选择列表中进行选择，就会触发该函数。

这是我的选择列表:

<select id="payment_type" name="payment_type" onchange="java_script_:show(this.options[this.selectedIndex].value)">
            <option id="default" value="" <cfif #get_ticket.payment_type# eq ''>selected="selected"</cfif>>Please select the payment type</option>
            <option id="check" value="check" <cfif #get_ticket.payment_type# eq 'check'>selected="selected"</cfif>>Check</option>
            <option id="cash" value="cash" <cfif #get_ticket.payment_type# eq 'check'>selected="selected"</cfif>>Cash</option>
            <option id="visa" value="visa" <cfif #get_ticket.payment_type# eq 'visa'>selected="selected"</cfif>>Visa</option>
            <option id="mc" value="mc" <cfif #get_ticket.payment_type# eq 'mc'>selected="selected"</cfif>>Master Card</option>
            <option id="amex" value="amex" <cfif #get_ticket.payment_type# eq 'amex'>selected="selected"</cfif>>American Express</option>
            <option id="discover" value="discover" <cfif #get_ticket.payment_type# eq 'discover'>selected="selected"</cfif>>Discover Card</option>
          </select>

我的 javascript 函数将根据我的选择在我的页面中显示或隐藏 DIV。

这是 JS 代码:

<SCRIPT>          
$( document ).ready(function() {
console.log("My Function was called on page load"); 
    function show(select_item) {
       console.log( select_item);
        if (select_item == "check") {
            $("##check_number").css("display", "block");
            $("##card_number").css("display", "none");
            $("##card_name").css("display", "none");
            $("##expiration_date").css("display", "none");
            $("##cvc_code").css("display", "none");
            $('##submitPaymentForm').prop('disabled', false);
            $('##submitPaymentForm').prop('disabled', false);           
        }
        if (select_item == "cash") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "none");
            $("##card_name").css("display", "none");
            $("##expiration_date").css("display", "none");
            $("##cvc_code").css("display", "none");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "visa") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "mc") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "amex") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "discover") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        }  
        if(select_item == "") {
            $("##check_number").css("display", "none");
            $("##check_number").css("display", "block");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        }
    }
show($("##payment_type").val());
});

</SCRIPT>

我不仅在做出选择时尝试运行此脚本，而且在加载页面时也尝试运行此脚本，因为有时用户在做出选择后会返回此页面，并且我希望已显示正确的 DIV 或隐。

如果我的选择列表调用该函数，但它当前未在页面加载时运行我的函数，则效果很好。

我做错了什么？

Answer 1

您在 document.ready() 中定义了一个函数部分，但还没有调用它。在 document.ready() 的末尾添加对您的函数的调用，例如show(<param>);