使用ajax和jquery的下拉列表

I have drop-down with some value,if i change those value based on that will display another dropdown with value from mysql database by replacing the text below first drop-down.I am doing this process in jsp page.Second drop-down values are come from database when changeevent of first dropdown.My database contain two tables,one for country and other for city.country table contain the fields countryid and country_name and the city table contain the fields cityid,countryid and city_name.Below is my code that i did so far.Here i need to implement ajax and jquery ? Could you give me the code for fetchCites servlet code for populating the second drop down without using any php or .net pages.

我有一些值下拉,如果我改变那些值,那将显示另一个带有来自mysql数据库的下拉列表,通过替换下面的文本首先下拉。我在jsp页面中执行此过程。第二个下拉值当第一个下拉列表发生更改时,来自数据库。我的数据库包含两个表,一个用于country,另一个用于city.country表包含字段countryid和country_name,city表包含字段cityid,countryid和city_name.Below是我的代码我到目前为止。我需要实现ajax和jquery?你能给我一些fetchCites servlet代码的代码,用于在不使用任何php或.net页面的情况下填充第二个下拉列表。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
        <script>  
function createRequestObject(){  
var req;  
if(window.XMLHttpRequest){  
//For Firefox, Safari, Opera  
req = new XMLHttpRequest();  
}  
else if(window.ActiveXObject){  
//For IE 5+  
req = new ActiveXObject("Microsoft.XMLHTTP");  
}  
else{  
//Error for an old browser  
alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');  
}  
return req;  
}  

//Make the XMLHttpRequest Object  
var http = createRequestObject();  
function sendRequest(method, url){  
if(method == 'get' || method == 'GET'){  
http.open(method,url);  
http.onreadystatechange = handleResponse;  
http.send(null);  
}  
}  

function handleResponse(){  
if(http.readyState == 4 && http.status == 200){  
var response = http.responseText;  
if(response){  
document.getElementById("second_dropdown_code").innerHTML = response;  
}  
}       
}  

function getCityDropdown()  
   {  
   var w = document.myform.mylist.selectedIndex;  
   var country_id = document.myform.mylist.options[w].value;  
    sendRequest('GET','fetchCites.do?countryid=' + country_id);  
   }  

</script>  
</head>
<body>
    <h1>Hello World!</h1>
        <FORM NAME="myform">  
<SELECT NAME="country" onChange="getCityDropdown()">  
<OPTION VALUE="1">India</option>  
<OPTION VALUE="2">England</option>  
</SELECT>  
</FORM>  
<div id="second_dropdown_code">This text will be replaced by second City dropdown.     
</div> 
</body>
</html>

2 个解决方案

#1

try this thing in your coding

在你的编码中尝试这个东西

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

Ajax Code

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

#2

Suppose if you want to populate the given state dropdown

假设您要填充给定的状态下拉列表

   <SELECT NAME="sate" id="sate">  

    </SELECT>

Your json must be

你的json一定是

[{
    "state": "MP"
},
{
    "sate": "UP"
}]

And use the following code to populate the drop down of state. It makes the ajax call and get the response as the ajax object which is an ajax array and iterate through the array.

并使用以下代码填充状态下拉列表。它进行ajax调用并获得响应作为ajax对象,它是一个ajax数组并遍历数组。

  function getStateDropdown() {
    var w = document.myform.mylist.selectedIndex;
    var country_id = document.myform.mylist.options[w].value;

    $.ajax({
        url : 'fetchState.do?countryid=' + country_id,
        success : function(data) {
            $.each(data, function(i, val) {
                $("#state").append(
                        "<option value=" + i + ">" + val.state+ "</option>");
            });
        }
    });
}

#1