如何根据国家/地区列表使用 AJAX 填充状态列表？答案

【问题标题】：How to use AJAX to populate state list depending on Country list?如何根据国家/地区列表使用 AJAX 填充状态列表？
【发布时间】：2010-11-14 05:12:19
【问题描述】：

我有下面的代码，当您更改国家/地区列表时，该代码将更改州下拉列表。
如何仅在选择国家ID号234和224时更改状态列表？
如果选择其他国家，则应更改为该文本输入框

<input type="text" name="othstate" value="" class="textBox">

表格

<form method="post" name="form1">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>

<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>

javascript

<script>
function getState(countryId)
{
   var strURL="findState.php?country="+countryId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
     // only if "OK"
     if (req.status == 200)
         {
        document.getElementById('statediv').innerHTML=req.responseText;
     } else {
       alert("There was a problem while using XMLHTTP:\n" + req.statusText);
     }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}
</script>

【问题讨论】：

标签： ajax drop-down-menu

【解决方案1】：

**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "ajaxServer.jsp",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});
</script>
<style>
select { width: 10em }
</style>
</head>
<body>
<form>
    <table>
        <tr>
            <td> <label>Country:</label></td>
            <td>    <select class="country">
                    <option>Select</option>
                    <option value="usa">United States</option>
                    <option value="india">India</option>
                    <option value="uk">United Kingdom</option>
                </select>
            </td>
        </tr>
        <tr><td >
        <label>States:</label></td>
     <td>   <select id="response">
                    <option>Select State</option>

                </select>
        </td></tr>

    </table>
</form>
</body> 
</html>

**ajaxServer.jsp**
<option>Select State</option>
<% 
String count=request.getParameter("country");
String india[]={"Mumbai", "New Delhi", "Bangalore"};
String usa[]={"New Yourk", "Los Angeles","California"};
String uk[]={"London", "Manchester", "Liverpool"};
String states[];
if(count.equals("india"))
{
    for(int i=0;i<=2;i++)
    {
    out.print("<option>"+india[i]+"</option>");
    }
}
else if(count.equals("usa"))
{
    for(int i=0;i<usa.length;i++)
    {
    out.print("<option>"+usa[i]+"</option>");
    }
}
else if(count.equals("uk"))
{
    for(int i=0;i<=2;i++)
    {
    out.print("<option>"+uk[i]+"</option>");
    }
}

%>

【讨论】：

【解决方案2】：

////////////////// connection file con.php rishabh
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
         $dbhost = 'localhost';
         $dbuser = 'root';
         $dbpass = '';
         $conn = mysql_connect($dbhost, $dbuser, $dbpass);
         if(! $conn ) {
            die('Could not connect: ' . mysql_error());
         }
         mysql_select_db( 'testajax' );
?>

/////////////////////////// index.php rishabh
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<?php 
include('con.php');
?>
<form>
<div class="frmDronpDown">
    <div class="row">
        <table><tr><td><label>Country:</label><br/>
        <select name="country" id="country" data-name="country" class="demoInputBox" onChange="getCountry(this.value);">
        <option value="">Select Country</option>
        <?php
         $sql = mysql_query("SELECT distinct country FROM statecont ");
     while($result=mysql_fetch_array($sql)){
        ?>
        <option value="<?php echo $result['country']; ?>"><?php echo $result['country']; ?></option>
        <?php
        }
        ?>
        </select> </td>
             <td>
<label>Phone:</label><br/>
        <select name="phone" id="phone" data-name="phone" class="demoInputBox" onChange="getPhone(this.value);">
        <option value="">Select Country</option>
        <?php
         $sql = mysql_query("SELECT distinct phone FROM statecont ");
     while($result=mysql_fetch_array($sql)){
        ?>
        <option value="<?php echo $result['phone']; ?>"><?php echo $result['phone']; ?></option>
        <?php
        }
        ?>
        </select> 
</td></tr></table>
    </div>
    <div id="state-list"></div>
</div>
</form>
<script>
function getCountry(val) {
        var dataname = $('#country').attr('data-name');

        console.log(dataname);
    $.ajax({
    type: "POST",
    url: "data.php",
        data: {
                value_name: val,
                colomn_name: dataname
                },
    success: function (data){
        $("#state-list").html(data);
    }
    });
}

function getPhone(val) {
        var dataname = $('#phone').attr('data-name');

    console.log(dataname);
    $.ajax({
    type: "POST",
    url: "data.php",
        data: {
                 value_name: val,
                colomn_name: dataname
                },
    success: function (data){
        $("#state-list").html(data);
    }
    });
}
</script>

// ////////////////////data file data.php rishabh
<?php 
$val = $_POST["value_name"]; 
$colomn = $_POST["colomn_name"]; 
include('con.php');
$sql_aa = mysql_query("SELECT * FROM statecont where ".$colomn."='$val'"); ?>
  <table>
<tr><td>State</td><td>Countery</td></tr>
<?php while($result_aa=mysql_fetch_array($sql_aa)){ ?>
<tr><td><?php echo $result_aa['state']; ?></td><td><?php echo $result_aa['country']; ?></td></tr>
<?php } ?>
</table>

【讨论】：

为您的答案添加评论。

【解决方案3】：

VK API 只需选择国家，获取 id 并从中选择城市

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
    
var $j = jQuery.noConflict();
var _getCountry = function() {
    $j.ajax({
      url: "http://api.vk.com/method/database.getCountries",
      data: {
       'v': 5.5,
        'need_all': 0,
        'code' : 'RU,UA,BY,KZ,KG,LV,EE'  
       // 'count': 10
      },
      dataType: 'jsonp',
      success: function(data, status) {
        if (status !== 'success') {
          return false;
        }
        console.log(data.response, status); 
          
        $j.each(data.response.items, function(i, item) {
         console.log("each country");
         var newOption = '<option id="' + item.id + '" value="' + item.title + '">' + item.title + '</option>';
         country_options.push(newOption);
       });
    
       document.getElementById('countrylist').innerHTML = country_options;
          
      }
        
 });  
 }   

var _getCity = function(country_id) {
     
    $j.ajax({
      url: "http://api.vk.com/method/database.getCities",
      data: {
       'v': 5.61,
        'need_all': 0,
        'country_id': country_id
      },
      dataType: 'jsonp',
      success: function(data, status) {
        if (status !== 'success') {
          return false;
        }
        console.log(data.response, status); 
          
        $j.each(data.response.items, function(i, item) {
         console.log("each city");
         var newOption = '<option id="' + item.id + '" value="' + item.title + '">' + item.title + '</option>';
         city_options.push(newOption);
       });
    
       document.getElementById('citylist').innerHTML = city_options;
          
      }
        
 });  
 }  
       
var  city_options = [];
var  country_options = [];
    
 $j(document).ready(function () {  
    _getCountry(); 
     
  $j('#country').on('input',function() {
    var opt = $j('option[value="'+$j(this).val()+'"]');
    var countryid = opt.attr('id');  
      
    _getCity(countryid);  
      
     
  });

  
 });

</script>

 <div class="form-group">
          <label class="col-lg-4 control-label">Страна:</label>
          <div class="col-lg-8">
          
              <div class="controls">
            	<input name="country" list="countrylist" id="country" class="form-control" />
                <datalist id="countrylist">
                </datalist> 
              </div>
        
           
           
            
          </div>
        </div> 
   
        <div class="form-group">
          <label class="col-lg-4 control-label">Город:</label>
          <div class="col-lg-8">
                
            <input name="city" list="citylist" id="city" class="form-control"/>
                <datalist id="citylist">
            </datalist>  
              
           
          </div>
        </div>

【讨论】：

【解决方案4】：

编辑：这是一个非常适合该任务的解决方案，调整了 Tvanfosson 的线条：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script>
$(function() {
  $('#country').change( function() {
    var val = $(this).val();
    if (val == 223 || val == 224) {
        $('#othstate').val('').hide();
        $.ajax({
           url: 'findState.php',
           dataType: 'html',
           data: { country : val },
           success: function(data) {
               $('#state').html( data );
           }
        });
    }
    else {
       $('#state').val('').hide();
       $('#othstate').show();
    }
  });
});
</script>

<select style="background-color: #ffffa0" name="country" id=country >
  <option>Select Country</option>
  <option value="223">USA</option>
  <option value="224">Canada</option>
  <option value="225">England</option>
  <option value="226">Ireland</option>
</select>

<select style="background-color: #ffffa0" name="state">
  <option>Select Country First</option>
</select>

<input type="text" name="othstate" id=othstate value="" class="textBox" style="display: none;">

如您所见，我删除了<form> 元素，这不是绝对必要的，但可以添加（然后必须正确使用以防 JS 在用户端停用。请参阅 here.

我还消除了 onchange 事件，它被 'change()` jquery 函数所取代。

【讨论】：

【解决方案5】：

我认为简单的做法是提供一个状态下拉列表和一个具有不同 ID 的文本输入框。将两者的显示设置为 none 然后你只需要用

包围你的 getState() 内容

if (countryId == 233 || countryId == 234) {
   /* Ajax state population here */

   dropdownId.display = 'block';
   textEntryId.display = 'none';
}
else  {
   textEntryId.display = 'block';
   dropdownId.display = 'none';
}

（其中dropdownId 和textEntryId 是相关UI 组件的ID），因此您可以在选择时启用/显示状态下拉菜单或文本条目的显示。

JQuery 一切都很好，但我不会引入它只是来解决这个问题。

【讨论】：

【解决方案6】：

在执行 AJAX 请求之前检查 countryId 的值，并且仅当 countryId 在允许的范围内时才执行请求。在 countryId 不匹配的情况下，我会隐藏选择（可能也清除它的值）并显示以前隐藏的已经存在的输入。如果选择了允许的国家/地区，则应执行相反的操作。

下面的jQuery示例：

<form method="post" name="form1">
   <select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
      <option>Select Country</option>
      <option value="223">USA</option>
      <option value="224">Canada</option>
      <option value="225">England</option>
      <option value="226">Ireland</option>
   </select>

   <select style="background-color: #ffffa0" name="state">
      <option>Select Country First</option>
   </select>

   <input type="text" name="othstate" value="" class="textBox" style="display: none;">
</form>

$(function() {
    $('#country').change( function() {
        var val = $(this).val();
        if (val == 223 || val == 224) {
            $('#othstate').val('').hide();
            $.ajax({
               url: 'findState.php',
               dataType: 'html',
               data: { country : val },
               success: function(data) {
                   $('#state').html( data );
               }
            });
        }
        else {
           $('#state').val('').hide();
           $('#othstate').show();
        }
    });
});

【讨论】：

我遵循理论我只是不知道足够的 javascript 来编写它，我是一个 php 人
无论如何你最好还是使用 jQuery。我添加了一个 jQuery 示例。
我喜欢这个，因为我已经在所有页面上加载了 jquery，示例代码给了我这个错误 $ 未定义
另一个虽然不是加载带有状态的新页面，但如果我已经在页面上拥有状态列表，它可以隐藏然后以相同的方式显示吗？
是的。如果这些州已经在页面上，您可以显示/隐藏这些，尽管如果您扩展到两个以上的国家，这会变得很棘手。您还必须小心如何命名它们或在使它们可见/不可见时更改名称。