Javascript 选择选项时显示弹出窗口
我试图在页面上显示所选选项值的弹出窗口。 我需要检查选择选项中的值，如果匹配，则应显示弹出窗口。但我无法显示所选选项更改的弹出窗口。 此外，我希望弹出显示每次用户选择该选项。 请告知Javascript 选择选项时显示弹出窗口,javascript,jquery,Javascript,Jquery,我试图在页面上显示所选选项值的弹出窗口。 我需要检查选择选项中的值，如果匹配，则应显示弹出窗口。但我无法显示所选选项更改的弹出窗口。 此外，我希望弹出显示每次用户选择该选项。 请告知 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
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>
首先，您的HTML似乎缺少带有嵌套SELECT语句的DisplayShippingSpeedChoicesTD元素。您所看到的标记有点奇怪，在呈现DOM之后将ID应用于元素并没有明显的原因，只是看起来很有趣。一旦您添加了这个，您的代码就可以正常工作 HTML
我无法在html中看到您的。是吗？很明显，所有的HTML标记都没有包含在这篇文章中。我是mma-1，这仅仅是因为OP拒绝回答澄清请求，并且没有显示代码的所有相关部分。
<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>
$(document).on('change','#shipOption',function () {
var value1 = ($('option:selected', this).val());
// alert(value1);
if ((value1 === "701")) {
// alert(value1);
$('.popup').show();
}
});