js执行顺序,该怎么处理 _JavaScript

js执行顺序
省市区联级三级类目，省Provinces，市city
$("#Provinces").val(str[7]); //给省下拉框赋值
$("#Provinces").trigger("change"); //省下拉框执行onchange事件
$("#City").val(str[8]); //给市下拉框赋值
运行结果：省正确（比如浙江），市可选择项正确（显示杭州、温州、金华。。。），但选中项错误（第3行没执行的效果，还是显示第1个）
处理方案1：如果第2行和第3行之间加入一个alert();则运行正常。第三行的效果出现
处理方案2：第3行改成setTimeout (function (){ $("#City").val(str[8]);},1000); 延迟1秒执行，运行正常。第三行的效果出现
根据前2个处理方案结果说明：第2行还没执行结束，就执行第3行了。有什么办法等第2行运行结束后执行第3行。处理方案2不能确定第2行什么时候结束，有时延迟处理，有时没处理

------解决方案--------------------
第三行应该放到第二行的事件里面去执行
------解决方案--------------------
因为你的市选中没变，而是重新加载了，你应该在此基础上在省变的时候市变，然后区也变

探讨

第三行应该放到第二行的事件里面去执行

------解决方案--------------------

JScript code

<html>
<head>
    <title>testing</title>
    <script src="ec/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#Provinces").change(function (e,cityValue) {
                if ($(this).val() == "1") {
                    $("#City").html("<option value='1' >长沙</option><option value='2' >衡阳</option>");
                } else {
                    $("#City").html("<option value='1' >武汉</option><option value='2' >襄阳</option>");
                }
                if (typeof (cityValue) != "undefined") {
                    $("#City").val(cityValue);
                }
            });
        });
        function test() {
            $("#Provinces").val("2");
            $("#Provinces").trigger("change","2");
        }
    </script>
</head>
<body>
    省：
    <select id="Provinces" >
        <option value="1" >湖南</option>
        <option value="2" >湖北</option>
    </select><br />
    市：
    <select id="City">
        <option value="1" >长沙</option>
        <option value="2" >衡阳</option>
    </select><br />
    <input type="button" value="设置成湖北襄阳" onclick="test()" />
</body>
</html>