试图在页面加载

时间:2015-10-01 18:01:33

标签: javascript jquery coldfusion

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

以下是我的选择列表:

<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或隐。

如果我的选择列表调用该函数但它当前没有在页面加载时运行我的函数,它可以正常工作。

我做错了什么?

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

这可以解决您的问题,windows.onload

<!DOCTYPE html> <html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>

    </body> </html>