Trigger jQuery event (bPopup) on specific dropdown value selected

Question

I am trying to trigger a popup to appear if and only if a given value is selected from the list.

The value of the dropdown menu is determined by session data, as such the dropdown can be any of the options available on page load.

I want a popup (I am using bPopup plugin) to appear if a specific selection is set on page load.

My dropdown

This is the HTML/javascript as it appears in browser source:

<select
    onchange="this.form.submit()"
    name="country"
    id="country_drop"
    >

        <option value="select">Please Select</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Angola">Angola</option>
        <option value="Argentina">Argentina</option>

</select>

This is the jquery I'm trying to use to generate the popup if the slection is Angola on page load:

$(document).ready(function() {
    if($("#country_drop").val()=="Angola");
        {
            $('#popup').bPopup({            
            opacity: 0.6,
            modalClose: true
            });
        }
});

What is currently happening:

Page loads popup on page load irrespective of selection, 100% of the time.

Answer 1

You have a semicolon at the end of the if condition

if($("#country_drop").val()=="Angola");

JS

$(document).ready(function() {

    $('#country_drop').change(function(){
    if($('#country_drop').val()=="Angola")
        {
            $('#popup').bPopup({            
            opacity: 0.6,
            modalClose: true
            });
        }
    });
});

Fiddle