如何在关闭叠加窗口时将所选选项更改为特定值

How to change Selected Option to specific value on close of Overlay window?

本文关键字:选项 叠加 窗口      更新时间:2023-09-26

如何更改下面的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();

&amp;

  // 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/