Negara WebAPI sample

Selected Negara
Kod1 =
Kod2 =
Kod3 =
Text =


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(document).ready(function () {
        $.ajax({
            type: "get",
            url: "http://www.azali.net/API/Negara",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: {},
            success: function (result) {
                $.each(result, function (i) {
                    $('#selNegara').append($('<option></option>').val(result[i].Kod1).html(result[i].NamaNegara));
                });
                $('#selNegara').change();
            },
            failure: function () {
                alert("Error");
            }
        });
        $('#selNegara').change(function () {
            var selectedKod = $("#selNegara option:selected").val();
            $.ajax({
                type: "get",
                url: 'http://www.azali.net/API/Negara/' + selectedKod,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: {},
                success: function (result) {
                    $("#selectedNegaraKod1").html(result.Kod1);
                    $("#selectedNegaraKod2").html(result.Kod2);
                    $("#selectedNegaraKod3").html(result.Kod3);
                    $("#selectedNegaraText").html(result.NamaNegara);
                },
                failure: function () {
                    alert("Error");
                }
            });
        });
    });
    </script>
    <h2>Negara</h2>
    <select id="selNegara"></select>
    <div>
        <h5>Selected</h5>
        Kod1 =<span id="selectedNegaraKod1"></span><br />
        Kod2 =<span id="selectedNegaraKod2"></span><br />
        Kod3 =<span id="selectedNegaraKod3"></span><br />
        Text =<span id="selectedNegaraText"></span>
    </div>