-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 回答