链式选择框

链式选择框

关注
发信
关注(28)粉丝(399)

链式选择框（国家，州，市）

本文介绍了链式选择框（国家，州，市）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个PHP页面，在这里我想从国家，州和城市的列表中选择一个位置。该页面包含的其他数据进行用户注册（姓名，电子邮件等），所以我不想刷新页面或任何时候，选择框刷新。目前，每一个选择框只加载国家，州或城市的完整列表。我想将它们链接，所以我没有重复的城市名称（相同的名称在不同的州或国家）。

的位置将被存储在数据库中，并且被传递到页上的负荷。然后，他们通过循环并添加到选择框：

 ＆LT; TR＆GT;
    ＆LT;标签＆gt;选择国家：LT; /标签＆gt;
    ＆LT;选择名称=状态ID =state_select的风格=宽度：200像素;＆GT;
        ＆LT;期权价值=＆GT;选择一个州或省及LT; /选项＆GT;
        ＆LT; PHP而（$状态= $明─＆GT; fetchObject（））{＆GT;
             ＆LT;期权价值=＆LT; PHP的echo $语句＆GT; ID;＆gt;中＆GT;＆LT; PHP的echo $语句＆GT;称号; ？＆GT;＆LT; /选项＆GT;
        ＆LT; PHP}＆GT？;
    ＆LT; /选择＆GT;
＆LT; / TR＆GT;

数据库结构为pretty的简单：

 国家：| ID |标题|
状态：| ID |标题| COUNTRY_ID |
城市：| ID |标题| STATE_ID |

我能想到的逻辑在.onChange（）语句的应的清除链接的选择框，并追加新的选择，但我很新的基于Web的语言，我不能得到任何东西加工。下面是我的尝试，但我想我能JS和PHP之间轻松不引用。注：我知道这个片断是真的不好，有错误。我的想法是有一个脚本函数执行以下操作：

  1. 清除出国家选择框中的所有选项（假设你已经改变了这个国家的选择）
  2. 通过国家提供的清单（SQL查询通过的控制器）环
  3. 将一个选择项为具有COUNTRY_ID相匹配的选择COUNTRY_ID
    4. 每个条目的国家选择框

^这将是美妙的，如果这是可能的。任何其他方法将是一件好事，但我已经使用AJAX和JSON方法试过，我真的不理解他们。

 ＆LT;脚本SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆LT; / SCRIPT＆GT ;
＆LT;脚本＆GT;
    $（文件）。就绪（函数（）{
        $（'＃country_select'）。改变（函数（）{
            $（'＃state_select）空（）;
            //对于每一个状态
            ＆LT; PHP而（$状态= $明─＆GT; fetchObject（））{
                $ TEMP = $（'＃country_select）VAL（））。
                //如果国家选定的国家相匹配
                如果（$语句＆GT; COUNTRY_ID == $ TEMP）{
                    //创建一个选项＆GT？;
                    VAR的选择='＆LT;期权价值=＆GT;测试＆LT; /选项＆GT;';
                ＆LT; PHP //}
                //然后追加该选项＆GT？;
                 ＆LT; PHP //}＆GT？;
             $（'＃state_select）追加（可选）。
           }）;
        }）;
    ＆LT; / SCRIPT＆GT;

解决方案

$（'＃mobile_phone_network选项：选择）。VAL（）我没有测试，但它应该工作。很简单，它会给你一些想法

  ** HTML **
＆LT; D​​IV ID =countryWrap＆GT;＆LT;选择一个id =国家名称=国家＆GT;＆LT; /选择＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =stateWrap＆GT;＆LT;选择一个id =状态NAME =状态＆GT;＆LT; /选择＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =cityWrap＆GT;＆LT;选择一个id =城市NAME =城市和GT;＆LT; /选择＆GT;＆LT; / DIV＆GT;

＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
  $（'＃国）。改变（函数（）{
    LoadState的（$（本）.find（'：选择）。VAL（））
  }）
  $（'＃状态）。改变（函数（）{
    loadCity（$（本）.find（'：选择）。VAL（））
  }）


}）

功能loadCountry（）{
        $阿贾克斯（{
            键入：POST，
            网址：AJAX / ajax.php
            数据：得=国
            }）。完成（功能（结果）{
                $（结果）。每个（函数（）{
                    $（＃国）追加（$（'＆LT;选项＆GT;'，{
                        值：this.id，
                        文字：this.name，
                    }））;
                }）
            }）;
}
功能LoadState的（countryId）{
        $（＃状态）。子女（）。删除（）
        $阿贾克斯（{
            键入：POST，
            网址：AJAX / ajax.php
            数据：得=态放大器; countryId =+ countryId
            }）。完成（功能（结果）{
                $（结果）。每个（函数（）{
                    $（＃状态）追加（$（'＆LT;选项＆GT;'，{
                        值：this.id，
                        文字：this.name，
                    }））;
                }）
            }）;
}
功能loadCity（STATEID）{
        $（＃城市）。子女（）。删除（）
        $阿贾克斯（{
            键入：POST，
            网址：AJAX / ajax.php
            数据：得=城市和放大器; STATEID =+ STATEID
            }）。完成（功能（结果）{
                $（结果）。每个（函数（）{
                    $（＃城）追加（$（'＆LT;选项＆GT;'，{
                        值：this.id，
                        文字：this.name，
                    }））;
                }）
            }）;
}

//初始化国家
loadCountry（）;
＆LT; / SCRIPT＆GT;




** ajax.php **

$ countryId =使用isset（$ _ POST ['countryId']）？ $ _ POST ['countryId']：0;
$ STATEID =使用isset（$ _ POST ['STATEID']）？ $ _ POST ['STATEID']：0;
$命令=使用isset（$ _ POST ['得到']）？ $ _ POST ['得到']：;

开关（$命令）{
案国：
$声明=SELECT ID，名称从一个国家;
打破;
案状态：
$声明=SELECT ID，名字从状态COUNTRY_ID =（INT）countryId。
打破;
案城：
$声明=SELECT ID，名字从国家，STATE_ID =（INT）STATEID。
打破;
默认：
打破;
}

而$ sth = $ dbh-＆GT; prepare（$语句）;
$ sth-＆GT;执行（）;
$结果= $ sth-＆GT;使用fetchall（）;

回声json_en code（$结果）;
出口（）;

I have a php page where I would like to select a location from a list of countries, states, and cities. The page contains other data for user signup (name, email, etc) so I don't want to refresh the page or anything when the select boxes refresh. Currently, each of the select boxes just load the full list of countries, states, or cities. I want them to be chained so I don't have duplicate city names (same name in different states or countries).

Locations are stored in a database, and are passed to the page on load. They are then looped through and added to the select box:

<tr>
    <label>Select State: </label>
    <select name="state" id="state_select" style="width:200px;">
        <option value="">Select a State or Province</option>
        <?php while($state = $states->fetchObject()) { ?>
             <option value="<?php echo $state->id; ?>"><?php echo $state->title; ?></option>
        <?php } ?>
    </select>
</tr>

Database structure is pretty simple:

Country : | id | title |
State : | id | title | country_id |
City : | id | title | state_id |

I can think of logic in an .onChange() statement that should clear the chained select box and append new options, but I am very new to web based languages and I can't get anything working. Below is my attempt, but I guess I can't reference between js and php easily. Note: I am aware that this snippet is really bad and contains errors. My thoughts were to have a script function that does the following:

  1. Clear out all options in the State selection box (assuming you have changed the country selection)
  2. Loop through the supplied list of states (SQL query passed by the controller)
  3. Put a selection option in the State selection box for each entry that has a 'country_id' that matches the selected country_id

^ This would be fantastic if it is possible. Any other methods would be good too, but I have tried using ajax and JSON methods and I honestly don't understand them.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        $('#country_select').change(function(){
            $('#state_select').empty();
            //for each state
            <?php while($state = $states->fetchObject()) {
                $temp = $('#country_select').val());
                //if country matches selected country
                if($state->country_id == $temp){
                    // create an option ?>
                    var option = '<option value="">Test</option>';
                <?php// }
                //then append that option?>
                 <?php// } ?>
             $('#state_select').append(option);
           });
        });
    </script>
解决方案

$('#mobile_phone_network option:selected').val()i didn't tested but it should work. It's simple and it will give you some idea

**HTML**
<div id="countryWrap"><select id="country" name="country"></select></div>
<div id="stateWrap"><select id="state" name="state"></select></div>
<div id="cityWrap"><select id="city" name="city"></select></div>

<script>
$(document).ready(function(){
  $('#country').change(function(){
    loadState($(this).find(':selected').val())
  })
  $('#state').change(function(){
    loadCity($(this).find(':selected').val())
  })


})

function loadCountry(){
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=country"
            }).done(function( result ) {
                $(result).each(function(){
                    $("#country").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}
function loadState(countryId){
        $("#state").children().remove()
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=state&countryId=" + countryId
            }).done(function( result ) {
                $(result).each(function(){
                    $("#state").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}
function loadCity(stateId){
        $("#city").children().remove()
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=city&stateId=" + stateId
            }).done(function( result ) {
                $(result).each(function(){
                    $("#city").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}

// init the countries
loadCountry();
</script>




**ajax.php**

$countryId = isset($_POST['countryId'])  ? $_POST['countryId'] : 0;
$stateId = isset($_POST['stateId'])  ? $_POST['stateId'] : 0;
$command = isset($_POST['get'])  ? $_POST['get'] : "";

switch($command){
case "country":
$statement = "SELECT id, name FROM country";
break;
case "state":
$statement = "SELECT id, name FROM state WHERE country_id=".(int)countryId;
break;
case "city":
$statement = "SELECT id, name FROM country WHERE state_id=".(int)stateId;
break;
default:
break;
}

$sth = $dbh->prepare($statement);
$sth->execute();
$result = $sth->fetchAll();

echo json_encode($result);
exit();

这篇关于链式选择框（国家，州，市）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-11 03:16
Powered by LMLPHP ©2025 链式选择框 0.039683