如何在关闭叠加窗口时将所选选项更改为特定值
How to change Selected Option to specific value on close of Overlay window?
如何更改下面的JS函数,以便在关闭覆盖窗口时,下拉菜单上选择的选项恢复为"澳大利亚"。
Javascript
$(document).ready(function(){
// show popup when selecting a country from the drop-down
var money = 0;
$(".target").change(function () {
var optionSelected = $("option:selected", this);
money = optionSelected.attr("data-price");
$("input[name='shipping']").val(money);
$('.overlay-bg').show().css({'height' : docHeight});
$('.overlay-content').css({'top': scrollTop+20+'px'});
});
// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide();
// hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content.').click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
var iframe_popup = $('<iframe id="externalSite" class="externalSite" frameborder="0" allowtransparency="true" src="' + this.href + '" />');
iframe_popup.dialog(
{
title: ($this.attr('title')) ? $this.attr('title') : '',
autoOpen: true,
width: 600,
height: 450,
modal: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(600 - horizontalPadding).height(450 - verticalPadding);
});
});
HTML下拉菜单
<div class="main-content">
<select id="customer_country" name="customer_country"
class="validate[required] input_styling target"
style="background: #FFFFFF;">
<option value="">Please Select a Country</option>
<option value="Afghanistan" data-price="29.95">Afghanistan</option>
<option value="Åland Islands" data-price="29.95">Åland Islands</option>
<option value="Albania" data-price="29.95">Albania</option>
<option value="Algeria" data-price="29.95">Algeria</option>
<option value="American Samoa" data-price="29.95">American Samoa</option>
<option value="Andorra" data-price="14.95">Andorra</option>
<option value="Angola" data-price="29.95">Angola</option>
<option value="Anguilla" data-price="29.95">Anguilla</option>
<option value="Antarctica" data-price="29.95">Antarctica</option>
<option value="Antigua and Barbuda" data-price="29.95">Antigua and Barbuda</option>
<option value="Argentina" data-price="19.95">Argentina</option>
<option value="Armenia" data-price="29.95">Armenia</option>
<option value="Aruba" data-price="29.95">Aruba</option>
<option value="Australia" data-price="19.95" selected >Australia</option>
<option value="Austria" data-price="14.95">Austria</option>
</select>
</div>
我推测我需要更改这段代码:
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$('.overlay-bg').hide();
&;
// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide();
// hide the overlay
});
因此,当用户关闭覆盖窗口时,该功能需要将下拉菜单中的所选选项设置回默认值"Australia"。
请参阅Fiddle了解完整代码-Fiddle
任何建议都很好。
您需要将以下内容添加到您的点击事件中:
$('#customer_country').val('Australia');
首先存储选定的值,然后在覆盖结束时将其设置回存储的值。为了简洁起见,我还结合了按钮和覆盖点击事件处理程序:
// hide popup when user clicks on close button or the background
$('.close-btn, .overlay-bg').click(function () {
$('.overlay-bg').hide();
$(".target").val(prevSelected);
});
Fiddle:http://jsfiddle.net/gvwg04y6/2/
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 如何从选择框中的选项中获取属性值
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 带有 d3 的嵌入式 Google 地图.js叠加层显示 UI 选项和叠加元素,但不是地图本身
- 单击 标记时,显示叠加层,如果选择“是”作为选项,则跟随 的 href URL
- 如何在关闭叠加窗口时将所选选项更改为特定值