我在 mysql 、 india_states 和 india_cities 中创建了 2 个表。我从 mysql 本身插入了值,其中 india_states 有 4 个州,在 india_cities 中有 16 个城市名称,这意味着 india_states 表中的一个州马哈拉施特拉邦在 india_cities 表中有 4 个城市。我已经使用 jquery 在我的 html 页面中成功地在下拉列表中显示了状态,下面是状态的代码。
$(document).ready(function(){
var states_name="";
$.ajax({
type: 'GET',
url: 'http://localhost:8082/JqueryForm/html/jsp/states_name.jsp',
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
var select = $('#select_states').empty();
$.each(data, function(i) {
states_name = data[i].state_name;
console.log("states_name:" + states_name);
select.append('<option value="'
+ states_name
+ '">'
+ states_name
+ '</option>')
});
}
});
});
现在我想做的是,当我选择马哈拉施特拉邦时,另一个下拉列表应该自动显示仅与马哈拉施特拉邦相关的 4 个城市,因为我已将 states_id 放入 india_cities 表中。我还创建了一个 jsp 页面,用于根据以下 url 在 json 视图中显示我的城市
http://localhost:8082/JqueryForm/html/jsp/city_names.jsp?states_id=1
{
1: {
city_name: "Mumbai"
},
2: {
city_name: "Pune"
},
3: {
city_name: "Thane"
},
4: {
city_name: "Navi Mumbai"
}
}
这是我上面的jquery代码
$(document).ready(function(){
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=
([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
var states_id = $.urlParam('states_id');
var cities_name="";
$.ajax({
type: 'GET',
url: 'http://localhost:8082/JqueryForm/html/jsp/city_names.jsp',
data: { states_id: states_id },
dataType: 'json',
success: function (data) {
var select = $('#select_cities').empty();
$.each(data, function(i) {
cities_name = data[i].city_name;
console.log("cities_name:" + cities_name);
select.append('<option value="'
+ cities_name
+ '">'
+ cities_name
+ '</option>')
});
}
});
});
india_states.jsp
<%
JSONObject finalJSON = new JSONObject();
Sql_Server details = new Sql_Server();
request.setCharacterEncoding("utf8");
response.setContentType("application/json");
List<String> list = details.getIndiaStates();
int recordCounter = 1;
JSONArray jArray = new JSONArray();
for (int i = 0; i < list.size(); i++) {
JSONObject formDetailsJson = new JSONObject();
formDetailsJson.put("state_name", list.get(i));
finalJSON.put(recordCounter, formDetailsJson);
++recordCounter;
}
out.println(finalJSON.toString());
%>
代替states_id
我输入“1”时,它向我显示了马哈拉施特拉邦的值,但是如何动态获取 states_id 呢?所以需要一些帮助来根据第一个下拉列表的值填充我的其他下拉列表。谢谢