Question

$(document).ready(function(){
    $("#country").load("country.php",function(){        
        //Select the option from DB
        $('#country').val("<?PHP echo $country;?>");            
        //Load state option list
        switch($("#country").val()){
            case "aus":$("#state").load("aus_state.php",function(){
                $('#state').val("<?PHP echo $state;?>");
                switch($("#state").val()){
                    case "aus_ACT":$("#location").load("aus_ACT.php",function(){
                    $('#location').val("<?PHP echo $location;?>");
                    ...

                    });break
                    case "aus_NSW":$("#location").load("aus_NSW.php");break
                    case "aus_NT":$("#location").load("aus_NT.php");break
                    case "aus_QLD":$("#location").load("aus_QLD.php");break
                    case "aus_SA":$("#location").load("aus_SA.php");break
                    case "aus_TAS":$("#location").load("aus_TAS.php");break
                    case "aus_VIC":$("#location").load("aus_VIC.php");break
                    case "aus_WA":$("#location").load("aus_WA.php");break
                }
            });break
            case "eng":$("#state").load("eng_countie.php",function(){
                ...

            });break
            case "usa":$("#state").load("us_state.php",function(){
                ...

            });break
        }
    });
});

我有一个动态下拉选择选项。

[国家] - GT; [状态] - GT; [位置]

我使用jquery加载选项列表。但是我需要自动选择用户更新的选项列表。恩。 [美国] - GT; [CA] - ＆GT; [LA]

我在加载文件.load(file.php, function(){...})

后放了一个函数

$('country').val("<?PHP echo data from DB; ?>")

开关状态选项列表取决于DB的值...

由于我有很多子列表，因此编辑起来非常困难。有更好的方法吗？

类似

$("#country").val("<?PHP echo $country;?>").change(function(){
    switch($("#country").val()){
        case "aus":$("#state").load("aus_state.php");break
        case "eng":$("#state").load("eng_countie.php");break
        case "usa":$("#state").load("us_state.php");break
    }
});


$("#state").val("<?PHP echo $state;?>").change(function(){
    switch($("#state").val()){
        case "aus_ACT":$("#location").load("aus_ACT.php");break
        //...Put all countries's states here 
    }
});

这很复杂，我尽力解释

Answer 1

您可以构建地图以识别国家/地区代码（aus_state.php）中的状态页面（aus），状态代码中的位置页面以及一些必要的更深层映射。这些映射可以从数据库或项目结构构建。

var mapping = {
    country_state: {
        aus: 'aus_state.php',
        eng: 'eng_countie.php',
        usa: 'us_state.php'
    },
    state_location: {
        aus_ACT: 'aus_ACT.php',
        aus_NSW: 'aus_NSW.php',
        ...
        // it seems that the state code has a country prefix
        // so you can merge all countries' locations in a map.
        usa_CA: 'usa_CA.php',
    }
};

您可以在单独的JS文件中编写函数中的静态部分，而只使用PHP生成更改部分，而不是动态创建所有JS代码。这里只有国家/州/地区的变化。您可以将代码放在HTML页面的底部，以便在$(document).ready处理程序之前对其进行评估和初始化。
```
var selection_state = {
    country: "<?PHP echo $country;?>",
    state: "<?PHP echo $state;?>",
    location: "<?PHP echo $location;?>"
};
```

在单独的JS文件中重写加载/选择逻辑，并将其加载到带有<script src="..."></script>标记的HTML页面中。

$(function () {
    $('#country').load('country.php', function () {
        $('#country').val(selection_state.country);
        if (! mapping.country_state[selection_state.country])
            return;
        $('#state').load(mapping.country_state[selection_state.country], function () {
            $('#state').val(selection_state.state);
            if (! mapping.state_location[selection_state.state])
                return;
            $('#location').load(mapping.state_location[selection_state.state], function () {
                $('#location').val(selection_state.location);
            });
        });
    });
});

似乎没有必要将国家/州/地区的加载顺序加载。您可以并行执行加载。（下面的代码具有更好的性能，但是当某些列表无法加载时，与前者的行为会有不同的行为。）

$(function () {
    $('#country').load('country.php', function () {
        $('#country').val(selection_state.country);
    });
    if (mapping.country_state[selection_state.country]) {
        $('#state').load(mapping.country_state[selection_state.country], function () {
            $('#state').val(selection_state.state);
        });
    }
    if (mapping.state_location[selection_state.state]) {
        $('#location').load(mapping.state_location[selection_state.state], function () {
            $('#location').val(selection_state.location);
        });
    }
});

PS。对于第1步，我认为最好只请求两个页面来获取状态/位置并传递国家/地区代码/州代码，而不是为不同的国家/地区请求不同的页面作为参数。例如。请求country_state.php?country=aus澳大利亚所有州（？）。这将简化服务器和客户端的逻辑，您将获得更清晰的项目结构。使用mod_rewrite，您可以根据需要将aus_state.php的请求绑定到country_state.php?country=aus。

Jquery加载文件并在文件加载后自动选择该选项

1 个答案: