Question

我有一些值的下拉列表，如果我根据这个值更改这些值将显示另一个带有来自mysql数据库的值的下拉列表，通过替换下面的文本首先下拉。我正在jsp页面中执行此过程。第二滴-down值来自第一次下拉列表的更改。我的数据库包含两个表，一个用于country，另一个用于city.country表包含字段countryid和country_name，city表包含字段cityid，countryid和city_name.Below is我到目前为止所做的代码。我需要实现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>

Answer 1

在你的编码中尝试这件事

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

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

Answer 2

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

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

    </SELECT>

你的json必须是

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

并使用以下代码填充状态下拉列表。它进行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>");
            });
        }
    });
}

使用ajax和jquery的下拉列表

2 个答案: