Pass value of one dropdown to another using Multiple jquery .ajax() calls
Question
I'm not much familiar with jquery, but here I'm trying to do this :
I'm trying to pass value of one dropdown to another dropdown, here is the jsp :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
import="java.sql.*,com.connection.DBConnection;"%>
<!DOCTYPE html>
<html>
<head>
<title>Country</title>
<style>
.formContainer {
margin-left: auto;
margin-right: auto;
width: 800px;
border-radius: 15px;
background-color: #75D1FF;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="Country.js"></script>
</head>
<body>
<div class="formContainer">
<form action="SampleServlet" method="get">
<fieldset>
<label>Country :</label> <select id="countryid" name="country">
<option value='select'>Select</option>
<%
Connection con = DBConnection.getConnection();
Statement st = con.createStatement();
String sql = "select * from country";
ResultSet rs = st.executeQuery(sql);
while (rs.next()) {
%>
<option value='<%=rs.getString(2)%>'><%=rs.getString(2)%></option>
<%
}
rs.close();
%>
</select><br />
<div class="Stateselect">
<select id="Stateid">
</select>
</div><br /><br />
<div class="Cityselect">
<select id="Cityid" onchange="loadXMLDoc()">
</select>
</div><br /><br />
<div class="Areaselect">
<select id="Areaid"></select>
</div><br /><br />
<div class="buttonsDiv">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Here, depending on the country I select, states should be displayed, depending on states the cities and from cities, the areas in it. I've used three servlet classes here namely CountryServlet, StateServlet and CityServlet Here is the js file I'm using :
$(document).ready(function() {
$(".Stateselect,.Cityselect,.Areaselect").hide();
$("#countryid").change(function() {
var country = document
.getElementById("countryid").value;
if (country != 'select') {
$.ajax({
url : "ActionServlet?country="+ country,
method : "GET",
type : "html",
success : function(
result) {
$(".Stateselect").html(result);
$(".Stateselect").show(700);
}
});
} else {
$(".Stateselect").hide(700);
};
});
if(document.getElementById("Stateid").style.display != "none")
{
$('#Stateid').change(function() {
var country = document.getElementById("country").value;
var state = document.getElementById("Stateid").value;
if (country != 'select' && state != null) {
$.ajax({
url : "StateServlet?country="+ country+ "&state="+ state,
method : "GET",
type : "html",
success : function(result) {
$(".Cityselect").html(result);
$(".Cityselect").show(700);
}
});
} else {
$(".Cityselect").hide(700);
};
});
}
if(document.getElementById("Cityid").style.display != "none") {
$('#Cityid').change(function() {
var country = document.getElementById("country").value;
var state = document.getElementById("Stateid").value;
var city = document.getElementById("Cityid").value;
if ((country != 'select' && state != 'select') && city != 'select') {
$.ajax({
url : "CityServlet?country="+ country + "&state=" + state + "&city="+ city,
// SampleServlet?country=India&state=Telangana&city=Hyderabad&area=Madhapur
method : "GET",
type : "html",
success : function(result) {
$(".Areaselect").html(result);
$(".Areaselect").show(700);
}
});
} else {
$(".Areaselect").hide(700);
};
});
};
});
Problem is, only the first ajax call is working. Rest two are not. Please help. Thanx in advance
1 answers
solution1
0 2014-09-18 11:21:07
You hid all the divs with dropdowns, at the first line of your js code
$(".Stateselect,.Cityselect,.Areaselect").hide();
and then you are binding the change event based on the fact if the div is hidden or not.
if(document.getElementById("Cityid").style.display != "none") {
}
Since the divs are hidden, the code doesn't get executed and the change event doesn't register. I recommend revisiting the if conditions where you have tested the display property like if(document.getElementById("Cityid").style.display != "none") remove these and the code will work.
Update:
Since you need to run the code only if the div is visible, you have to change the following
if(document.getElementById("Cityid").style.display != "none") {
$('#Cityid').change(function() {
into
$('#Cityid').change(function() {
if(document.getElementById("Cityid").style.display != "none") {
this way, the change event is always bound but the code only gets executed if the div is visible.
Complete code for one dropdown
$('#Cityid').change(function () {
if (document.getElementById("Cityid").style.display != "none") {
var country = document.getElementById("country").value;
var state = document.getElementById("Stateid").value;
var city = document.getElementById("Cityid").value;
if ((country != 'select' && state != 'select') && city != 'select') {
$.ajax({
url: "CityServlet?country=" + country + "&state=" + state + "&city=" + city,
// SampleServlet?country=India&state=Telangana&city=Hyderabad&area=Madhapur
method: "GET",
type: "html",
success: function (result) {
$(".Areaselect").html(result);
$(".Areaselect").show(700);
}
});
} else {
$(".Areaselect").hide(700);
};
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.