-4

選択したオプション値のページにポップアップを表示しようとしています。選択オプションの値を確認する必要があり、一致する場合はポップアップが表示されます。しかし、選択したオプションの変更に関するポップアップを表示できません。また、ユーザーがそのオプションを選択するたびにポップアップが表示されるようにします。お知らせ下さい。

Here is my code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>jQuery Popup Dialog - Click</title>
        <style type="text/css">
            #overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                filter:alpha(opacity=70);
                -moz-opacity:0.7;
                -khtml-opacity: 0.7;
                opacity: 0.7;
                z-index: 100;
                display: none;
            }
            .content a {
                text-decoration: none;
            }
            .popup {
                width: 100%;
                margin: 0 auto;
                display: none;
                position: fixed;
                z-index: 101;
            }
            .content {
                min-width: 600px;
                width: 600px;
                min-height: 200px;
                margin: -13px;
                background: #f3f3f3;
                position: relative;
                z-index: 103;
                padding: 10px;
                border-radius: 5px;
                box-shadow: 0 2px 5px #000;
            }
            .content p {
                clear: both;
                color: #555555;
                text-align: justify;
            }
            .content p a {
                color: #d91900;
                font-weight: bold;
            }
            .content .x {
                float: right;
                height: 35px;
                left: 22px;
                position: relative;
                top: -25px;
                width: 34px;
            }
            .content .x:hover {
                cursor: pointer;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type='text/javascript'>
            $(document).ready(function() {

                $('#DisplayShippingSpeedChoicesTD').parent().parent().parent().attr("id", "shipTable");
                $('#shipTable select').attr('id', 'shipOption');

                $('#shipOption').change(function() {
                    var value1 = ($('#shipOption option:selected').val());
                    //      alert(value1);
                    if ((value1 === "701")) {

                        //alert(value1);
                        $('.popup').show();
                    }


                });

            });







            $(function() {
                var overlay = $('<div id="overlay"></div>');
                $('.close').click(function() {
                    $('.popup').hide();
                    overlay.appendTo(document.body).remove();
                    return false;
                });

                $('.x').click(function() {
                    $('.popup').hide();
                    overlay.appendTo(document.body).remove();
                    return false;
                });

                $('.click').click(function() {
                    overlay.show();
                    overlay.appendTo(document.body);

                    return false;
                });
            });
        </script>
    </head>

    <body>
        <div class='popup'>
            <div class='content'>
                <img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
                 <h1>ATTENTION</h1>

                <p>We do NOT recommend using UPS GROUND for customers who do NOT live in the immediate surrounding states of Florida. Reason being is that UPS Ground is ground transport from us to you. So if you live in a state far away and select this please note that it can take up to 5 business days. If you wish to still use UPS, we recommend UPS 3 Day select as an alternative for our customers who do not live near our company.
                    <br/>
                    <br/> <a href='' class='close'>Close</a>

                </p>
            </div>
        </div>
        <div id='container' style=" display:none;"> <a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> 
            <br/>
        </div>
    </body>

</html>
4

1 に答える 1

0

まず、あなたの HTML にはDisplayShippingSpeedChoicesTD、ネストされたSELECTステートメントを持つ要素がないようです。あなたのマークアップは少し奇妙ですID。DOM がレンダリングされた後に要素に s を適用するのは、楽しいように見える以外に明確な理由はありません。これを追加すると、コードは正常に機能します。

HTML

<select id="shipOption"> <!-- this element eventually becomes shipOption via some jQuery traversing -->
     <option value="101">the option is 101.</option>
     <option value="201">the option is 201.</option>
     <option value="301">the option is 301.</option>
     <option value="401">the option is 401.</option>
     <option value="501">the option is 501.</option>
     <option value="701">UPS Ground</option>
</select>

スクリプトの変更これらのスクリプトの変更を試してみて、何が起こるか見てみましょう。まだ行われていない委任が必要だと思います。また===、value1. ==整数または文字列を扱う場合は、コンパレータを使用する方がはるかに安全です。

$(document).on('change','#shipOption',function () {
    var value1 = ($('option:selected', this).val());
    // alert(value1);
    if ((value1 === "701")) {
        // alert(value1);
        $('.popup').show();
    }
});
于 2013-08-10T13:16:09.943 に答える