无法使用国家/地区选择中的状态动态填充下拉列表

Unable to dynamically populate dropdown with states from a country select

本文关键字:状态 动态 下拉列表 填充 选择 地区 国家      更新时间:2023-09-26

当您选择国家/地区时,我正在尝试进行动态下拉。我把所有的信息都保存在两张表里。我到底该怎么做?我做最初的国家名单没有问题。

但对于状态,我不知道如何处理javascript,因为它是客户端,PHP是服务器端,所以在我从下拉列表中获得countryID之前,PHP会被执行。既然我不知道如何对时间旅行进行编码,而且我知道我以前见过这种事情,我该如何实现这一点?

我宁愿不将所有数据下载/拉入一个数组,因为这完全是浪费内存,所以我认为一点sql、php和javascript可以工作,但我肯定遗漏了一些东西。

删除了原始源,因为它现在在下面。

如果感兴趣,数据库模式和信息如下:

mysql> show tables;
+-----------------+
| Tables_in_earth |
+-----------------+
| regions         |
| subregions      |
+-----------------+
2 rows in set (0.01 sec)

mysql> desc regions;
+---------------+------------------+------+-----+---------+----------------+
| Field         | Type             | Null | Key | Default | Extra          |
+---------------+------------------+------+-----+---------+----------------+
| id            | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| country       | varchar(45)      | YES  |     | NULL    |                |
| continent     | varchar(45)      | YES  |     | NULL    |                |
| currency_code | varchar(45)      | YES  |     | NULL    |                |
| currency_name | varchar(45)      | YES  |     | NULL    |                |
| phone_prefix  | varchar(45)      | YES  |     | NULL    |                |
+---------------+------------------+------+-----+---------+----------------+
6 rows in set (0.00 sec)
mysql> desc subregions;
+-----------+------------------+------+-----+---------+----------------+
| Field     | Type             | Null | Key | Default | Extra          |
+-----------+------------------+------+-----+---------+----------------+
| id        | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| region_id | int(10) unsigned | YES  | MUL | NULL    |                |
| name      | varchar(45)      | YES  |     | NULL    |                |
| timezone  | varchar(45)      | YES  |     | NULL    |                |
+-----------+------------------+------+-----+---------+----------------+
4 rows in set (0.00 sec)
mysql> select id,country from regions order by country desc limit 15;
+-----+--------------------------------------+
| id  | country                              |
+-----+--------------------------------------+
| 716 | Zimbabwe                             |
| 894 | Zambia                               |
| 887 | Yemen                                |
| 732 | Western Sahara                       |
| 876 | Wallis and Futuna                    |
| 704 | Vietnam                              |
| 862 | Venezuela                            |
| 336 | Vatican                              |
| 548 | Vanuatu                              |
| 860 | Uzbekistan                           |
| 858 | Uruguay                              |
| 581 | United States Minor Outlying Islands |
| 840 | United States                        |
| 826 | United Kingdom                       |
| 784 | United Arab Emirates                 |
+-----+--------------------------------------+
15 rows in set (0.00 sec)
mysql> select id, name from subregions where region_id=840 limit 5;
+------+------------+
| id   | name       |
+------+------------+
| 3680 | Alaska     |
| 3681 | Alabama    |
| 3682 | Arkansas   |
| 3683 | Arizona    |
| 3684 | California |
+------+------------+
5 rows in set (0.52 sec)

有很多被剪切的代码,但这是index.php.generate.php的完整(ish)src。php获取值并处理数据。

<!-- snip -->
<script language="javascript" type="text/javascript">
function show(id)
{
   if ( id == "v7" )
   {
      document.getElementById('v8').style.visibility = 'hidden';
      document.getElementById('v7').style.visibility = 'visible';
   }
   else
   {
      document.getElementById('v7').style.visibility = 'hidden';
      document.getElementById('v8').style.visibility = 'visible';
   }
}
function enable()
{
    var value = document.getElementById("country").selectedIndex;
    if ( value > 0 )
    {
       document.getElementById("state").disabled = false;
    }
    else
       document.getElementById("state").disabled = true;
}
function getCountry()
{
   var e = document.getElementById("country");
   var countryID = e.options[e.selectedIndex].value;
   var country = e.options[e.selectedIndex].text;
//   alert( "Selected Country: " + country + "(" + countryID + ") ");
   return countryID;
}
function getStates()
{
    $('#state').html('');
    var e = document.getElementById("country");
    var countryID = e.options[e.selectedIndex].value;
    $.ajax({
            type: "POST",
            url: "index1.php",
            data: {countryID:countryID},
            dataType:'json',
            success: function(result){
                var toAppend = '';
                $.each(data,function(i,o){
                    toAppend += '<option>'+o.id+'</option>';
                });
                $('#state').append(toAppend);       
            },  
    });
}
</script>
</head>
<body>
<!-- major league snip -->
<div class="formDiv">
<form id="frmSigGen" name="frmSigGen" method="post" action="generate.php" class="form">
  <table border="0" align="center" class="SmTable">
      <tr>
      <td class="td"><div align="right">State/Provence:</div></td>
      <td class="td"><label>
        <select name="state" class="dropdown" id="state" disabled="disabled" onchange="getStates();">
        <option value="">State/Provence</option>
   <?php
      $countryID=$_POST['countryID'];
      $query = "select id, name from subregions where region_id=".$countryID;
      $reuslt=RunQuery($query);
      echo json_encode($reuslt);
   ?>
        </select>
      </label></td>
      </tr>
      <tr>
        <td class="td"><div align="right">Country:</div></td>
        <td class="td"><label>
          <select name="country" class="dropdown" id="country" onchange="enable();">
          <option value="">Select Country</option>
          <?php 
             $con = mysql_connect('localhost', 'root', 'password'); 
             if (!$con) 
             {
                die('Could not connect: ' . mysql_error());
             }
             mysql_select_db('earth');
             $query = "select id,country from regions order by country";
             $result = mysql_query($query);
//           while ($row=mysql_fetch_array($result)) 
         while ( $row = mysql_fetch_object( $result ) )              
         { 
          ?>
             <option value=<?php echo $row->id; ?>><?php echo $row->country;?></option>
          <?php } 
              mysql_free_result($result);
          ?>
          </select>

您必须使用ajax

像这个

function getStates()
{
    $('#state').html('');
    var e = document.getElementById("country");
    var countryID = e.options[e.selectedIndex].value;
    $.ajax({
            type: "POST",
            url: "getStates.php",
            data: {countryID:countryID},
            dataType:'json',
            success: function(result){
                var toAppend = '';
                $.each(data,function(i,o){
                    toAppend += '<option>'+o.id+'</option>';
                });
                $('#state').append(toAppend);       
            },  
    });
}

getStates PHP

   $countryID=$_POST['countryID'];
   $query = "select id, name from subregions where region_id=".$countryID;
   $reuslt=RunQuery($query);
   echo json_encode($reuslt);