下拉使用AJAX和jQuery名单

本文介绍了下拉使用AJAX和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名单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！