0 
$(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
        }
    });
});

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

[国家]->[州]->[位置]

我使用 jquery 加载选项列表。但是我需要自动选择选项列表供用户更新。前任。[美国]->[加利福尼亚]->[洛杉矶]

我在文件加载后放了一个函数，.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 
    }
});

很复杂，我尽力解释

4

1 回答 1

1

  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',
    }
};

  2. 与其动态创建所有 JS 代码，您可以将静态部分写入单独的 JS 文件中的函数中，并且只使用 PHP 生成变化部分。而这里只有国家/州/位置的变化。您可以将代码放在 HTML 页面的底部，以便在$(document).ready处理程序之前对其进行评估和初始化。

    var selection_state = {
    country: "<?PHP echo $country;?>",
    state: "<?PHP echo $state;?>",
    location: "<?PHP echo $location;?>"
};

  3. 在单独的 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

于 2013-06-09T12:24:22.197 回答