Question

我正在尝试在所选选项值的页面上显示弹出窗口。我需要检查select选项中的值，如果匹配，则应显示弹出窗口。但我无法在所选选项更改上显示弹出窗口。此外，我希望每次用户选择该选项时都会显示弹出窗口。请指教。

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>

Answer 1

首先，您的HTML似乎缺少带有嵌套DisplayShippingSpeedChoicesTD语句的SELECT元素。你的标记有点奇怪，在渲染DOM之后将ID应用于元素，除了它看起来很有趣之外没有任何明显的原因。添加后，您的代码就可以了。

<强> 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();
    }
});

在选择选项上显示弹出窗口

1 个答案: