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

下面的代码将在您更改国家/地区列表时更改州下拉列表。
如何使其仅在选择国家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>

函数getState（countryId）
{
var strURL=“findState.php？country=“+countryId；
var req=getXMLHTTP（）；
如果（请求）
{
req.onreadystatechange=函数（）
{
如果（req.readyState==4）
{
//只有在“OK”的情况下
如果（请求状态==200）
{
document.getElementById（'statediv'）。innerHTML=req.responseText；
}否则{
警报（“使用XMLHTTP:\n“+req.statusText时出现问题”）；
}
}
}
请求打开（“获取”，strURL，true）；
请求发送（空）；
}
}

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

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

选择国家
美国
加拿大
英格兰
爱尔兰
先选择国家
$（函数（）{
$（'#country'）。更改（函数（）{
var val=$（this.val（）；
如果（val==223 | | val==224）{
$（'#othstate'）.val（''.hide（）；
$.ajax({
url:'findState.php'，
数据类型：“html”，
数据：{国家：val}，
成功：功能（数据）{
$（'#state'）.html（数据）；
}
});
}
否则{
$（'#state'）.val（''.hide（）；
$（'#othstate'）.show（）；
}
});
});

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

（其中

dropdownId

和

textEntryId

是相关UI组件的ID）因此您可以在选择时启用/显示状态下拉列表或文本条目的显示

---

JQuery非常好，但我不会仅仅为了解决这个问题而介绍它。

编辑：下面是一个非常适合这个任务的解决方案，它适应了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;">

$（函数（）{
$（'#country'）。更改（函数（）{
var val=$（this.val（）；
如果（val==223 | | val==224）{
$（'#othstate'）.val（''.hide（）；
$.ajax({
url:'findState.php'，
数据类型：“html”，
数据：{国家：val}，
成功：功能（数据）{
$（'#state'）.html（数据）；
}
});
}
否则{
$（'#state'）.val（''.hide（）；
$（'#othstate'）.show（）；
}
});
});
选择国家
美国
加拿大
英格兰
爱尔兰
先选择国家

如您所见，我删除了

元素，该元素不是绝对必要的，但可以添加（然后必须正确使用，以防在用户端停用JS。请参阅

---

我还消除了

onchange

事件，该事件被'change（）`jquery函数所取代。

vkapi只需选择country，获取id并从中选择city

var$j=jQuery.noConflict（）；
var_getCountry=函数（）{
$j.ajax({
url:“http://api.vk.com/method/database.getCountries",
数据：{
“v”：5.5，
“全部需要”：0，
“代码”：“RU、UA、BY、KZ、KG、LV、EE”
//“计数”：10
},
数据类型：“jsonp”，
成功：功能（数据、状态）{
如果（状态！=“成功”）{
返回false；
}
console.log（数据、响应、状态）；
$j.每个（数据、响应、项目、功能（i、项目）{
控制台日志（“每个国家”）；
var newOption=''+item.title+''；
国家/地区选项。推送（新选项）；
});
document.getElementById（'countrylist'）。innerHTML=country\u选项；
}
});  
}   
var\u getCity=函数（国家/地区id）{
$j.ajax({
url:“http://api.vk.com/method/database.getCities",
数据：{
“v”：5.61，
“全部需要”：0，
“国家/地区id”：国家/地区id
},
数据类型：“jsonp”，
成功：功能（数据、状态）{
如果（状态！=“成功”）{
返回false；
}
console.log（数据、响应、状态）；
$j.每个（数据、响应、项目、功能（i、项目）{
控制台日志（“每个城市”）；
var newOption=''+item.title+''；
城市选项。推送（新选项）；
});
document.getElementById（'citylist'）。innerHTML=city\u选项；
}
});  
}  
var city_options=[]；
var国家/地区期权=[]；
$j（文档）.ready（函数（）{
_getCountry（）；
$j（“#country”）.on（'input'，function（）{
var opt=$j（'option[value=“”+$j（this.val（）+”）；
var countryid=opt.attr（'id'）；
_getCity（countryid）；
});
});

Страна:
Город:

//连接文件con.php rishabh
///////////////////////////index.php rishabh
国家：
<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;">

////////////////// 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>

**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>");
    }
}

%>