下拉使用AJAX和jQuery名单 [英] Drop-down list using ajax and jquery
问题描述
我有一些价值下拉，如果我改变的基础上，这些值将被替换下面第一个下拉就弄伤文本显示另一个下拉与MySQL数据库的价值在做这个过程在JSP中page.Second下降-down值来自数据库时，首先dropdown.My数据库中包含的ChangeEvent两个表，一个是国家和其他的city.country表中包含的字段countryid和COUNTRY_NAME和城市表包含的字段cityid，countryid和city_name.Below是我说我这样做是far.Here code我需要实现AJAX和jQuery？你能给我的$ C $下fetchCites的servlet code用于填充第二个下拉，而无需使用任何PHP或.NET的页面。
＆LT;％@页面的contentType =text / html的的pageEncoding =UTF-8％＆GT;
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT;冠军＆GT; JSP页面＆LT; /标题＆GT;
＆LT;脚本＆GT;
功能createRequestObject（）{
VAR REQ;
如果（window.XMLHtt prequest）{
//对于Firefox，Safari浏览器，歌剧
REQ =新XMLHtt prequest（）;
}
否则，如果（window.ActiveXObject）{
//对于IE 5+
REQ =新的ActiveXObject（Microsoft.XMLHTTP）;
}
其他{
//为一个旧的浏览器错误
警报（'您的浏览器是不是IE 5或更高版本，或Firefox或Safari或Opera）;
}
返回REQ;
}
//使XMLHtt prequest对象
变种的http = createRequestObject（）;
函数sendRequest将（方法，URL）{
如果（方法=='得到'||方法=='GET'）{
http.open（方法，URL）;
http.onreadystatechange =用handleResponse;
http.send（空）;
}
}
功能用handleResponse（）{
如果（http.readyState == 4和＆安培; http.status == 200）{
VAR响应= http.responseText;
如果（响应）{
的document.getElementById（second_dropdown_ code）的innerHTML =响应。
}
}
}
功能getCityDropdown（）
{
变种W = document.myform.mylist.selectedIndex;
VAR COUNTRY_ID = document.myform.mylist.options [W] .value的;
sendRequest将（GET，fetchCites.do?countryid='+ COUNTRY_ID）;
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; H1＆GT;的Hello World＆LT;！/ H1＆GT;
＆LT; FORM NAME =MyForm的＆GT;
＆LT; SELECT NAME =国家的onChange =getCityDropdown（）＆GT;
＆LT;期权价值=1＆GT;印度和LT; /选项＆GT;
＆LT;期权价值=2＆GT;英格兰和LT; /选项＆GT;
＆LT; / SELECT＆GT;
＆LT; / FORM＆GT;
＆LT; DIV ID =second_dropdown_ code＆gt;这文本将通过第二市下拉所取代。
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
试试这件事情在你的编码
＆LT;形式方法=邮报名称=Form1的＆GT;
＆LT;选择风格=背景颜色：＃ffffa0NAME =国家的onchange =的getState（THIS.VALUE）＆GT;
＆LT;选项＆GT;选择国家＆LT; /选项＆GT;
＆LT;期权价值=223＆GT;美国＆LT; /选项＆GT;
＆LT;期权价值=224＆GT;加拿大和LT; /选项＆GT;
＆LT;期权价值=225＆GT;英格兰和LT; /选项＆GT;
＆LT;期权价值=226＆GT;爱尔兰＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;选择风格=背景颜色：＃ffffa0NAME =状态＆GT;
＆LT;选项＆GT;选择国家首先＆LT; /选项＆GT;
＆LT; /选择＆GT;
阿贾克斯code
$（函数（）{
$（'＃国）。改变（函数（）{
VAR VAL = $（本）.VAL（）;
如果（VAL == 223 || VAL == 224）{
$（'＃othstate）VAL（''）隐藏（）。
$阿贾克斯（{
网址：findState.php，
数据类型：HTML，
数据：{国家：VAL}，
成功：功能（数据）{
$（'＃国家）HTML（数据）;
}
}）;
}
其他 {
$（'＃国家）VAL（''）隐藏（）。
$（'＃othstate）显示（）。
}
}）;
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.
<%@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>
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();
}
});
这篇关于下拉使用AJAX和jQuery名单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
