javascript - 如何在覆盖窗口关闭时将选定选项更改为特定值？

Question

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

因此，当用户关闭覆盖窗口时，该函数需要将下拉列表中的选定选项设置回默认值“澳大利亚”。

请参阅 Fiddle 了解完整代码 - FIDDLE

任何建议都会很棒。

Answer 1

您需要将以下内容添加到您的点击事件中:

$('#customer_country').val('Australia');