Suppose You’re assign the value from code behind to Hidden field

countryValue.Value = "India";
stateValue.Value = "Maharashtra";
cityValue.Value = "Mumbai";
ScriptManager.RegisterStartupScript(this, this.GetType(), "com", "CallJavaScriptFun();", true);

and then calling the javascript method…the above code is set from code behind…

 function CallJavaScriptFun() {

            var countryValue = document.getElementById('<% =countryValue.ClientID %>').value;//here you will get the value of hidden field and assign to client side id....in our case it should be "India" as Value
            var country = document.getElementById('countryId');
            country = countryValue;

            var districtName = document.getElementById('<% =stateValue.ClientID %>').value; 
            var district = document.getElementById("stateId")
            district.value = districtName;

            var cityName = document.getElementById('<% =cityValue.ClientID %>').value;
            var city = document.getElementById("cityId")
            city.value = cityName;
        }

All the hidden field countryValue,stateValue,cityValue are stored in
respectively variable…

and then assign to client side id….

and Follow this answer also….

How do I programmatically set the value of a select box element using JavaScript?

After Edit-

You have to put this javascript function into head part….check out this image…i have already tested it out…it’s working fine…

I am using the geodata API that gives me all countries,states,cities in the world in three different select Lists.

These Lists can not be server side. These Lists take some time to load the options.
I wanna set a specific country, state and city from my C# code behind as selected in the select Lists.
I tried using clientScript and scriptManager in order to call a Javascript function that will set the country, state and city as selected, yet both methods didn’t call the function. below is my code:

The select Lists code:

       <tr>              
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                Country:</td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="countryId" class="countries order-alpha"  name="country">
                    <option value="">Select Country</option>
                </select>
                <asp:HiddenField ID="countryValue" runat="server" />


            </td>
        </tr>
        <tr>

            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                District:</td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="stateId" class="states order-alpha"  name="state">
                    <option value="">Select State</option>
                </select>
                <asp:HiddenField ID="stateValue" runat="server" />
            </td>
        </tr>
        <tr>

            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                City:
            </td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="cityId" class="cities order-alpha"  name="city">
                    <option value="">Select City</option>
                </select>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script src="//geodata.solutions/includes/countrystatecity.js"></script>
                <asp:HiddenField ID="cityValue" runat="server" />
            </td>
        </tr>

The Javascript function:

function fillCities(countryName, districtName, cityName)
{
    var country = document.getElementById("countryId")
    country.value = countryName;

    var district = document.getElementById("stateId")
    district.value = districtName;

    var city = document.getElementById("cityId")
    city.value = cityName;
}
</script>