DropDownList manipulation using jQuery

btnClick.js

$("#btnIn").click(function () {
    $("#countries").val('IN');
});

$("#btnEng").click(function () {
    $("#countries").val('ENG');
});

$("#btnAus").click(function () {
    $("#countries").val('AUS');
});

documentInit.js

$(document).ready(function () {
    
    function loadDropDownList(collection) {
        $.each(collection, function (index, value) {
            var listItem = $("<option></option>").val(index).html(value);
            $("#countries").append(listItem);
        });
    }

    var myCollection = {'IN': 'India','AUS': 'Australia','ENG': 'England'};
    loadDropDownList(myCollection);
})

handleChange.js

$(document).ready(function () {
    $("#countries").change(function () {
        // Place your code here
    });
});

layout.html

Countries: <select id="countries"></select>

listChange.js

$(document).ready(function () {
    $("#countries").change(function () {
    	var selectedValue = $("#countries").val();
        $("#countryValue").text(selectedValue);
        $("#countryText").text($("#countries > option[value='" + selectedValue + "']").html());
    });
});

newLayout.html

Selected Country’s Text: <span id="countryText"></span> <br />
Selected Country’s Value:  <span id="countryValue"></span><br />