mysql, india_states 및 india_cities에 2 개의 테이블을 만들었습니다. india_states에는 4 개의 주가 있고 india_cities에는 16 개의 도시 이름이있는 mysql 자체의 값을 삽입했습니다. 즉, india_states 테이블의 한 주 Maharashtra에는 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>')
});
}
});
});
이제 내가 원하는 것은 maharashtra를 선택하면 다른 드롭 다운이 자동으로 maharashtra와 관련된 4 개의 도시를 표시해야합니다. 왜냐하면 내가 india_cities 테이블에 states_id를 넣었 기 때문입니다. 또한 다음 URL을 기반으로 json보기에서 내 도시를 표시하는 데 사용되는 jsp 페이지를 만들었습니다.
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"을 넣을 때 대신 maharashtra 상태의 값을 표시하지만 states_id를 동적으로 얻는 방법은 무엇입니까? 따라서 첫 번째 드롭 다운의 값을 기반으로 다른 드롭 다운을 채우려면 도움이 필요합니다. 감사합니다
JSON에서 다음과 같은 상태 값을 수집하는 것이 좋습니다.
states_name = data[i].state_name; // get this value from your JSP like 123#Maharashtra
성공 함수에서 다음을 사용하여이 값을 나눌 수 있습니다.
var abc = (data [i] .state_name) .split ( "#");
옵션 태그의 값 속성에 상태의 ID를 넣습니다.
따라서 결국 옵션 값의 각 상태와 관련된 ID가 있습니다.
다음과 같이 코드를 변경하십시오.
$(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;
var abc = states_name.split("#");
console.log("states_name:" + states_name);
select.append('<option value="'
+ abc[0]
+ '">'
+ abc[1]
+ '</option>')
});
}
});
그런 다음 상태 드롭 다운의 변경 이벤트에서 다음과 같이 ajax를 호출하십시오.
$('#select_states').on("change", function () {
var state_id=$('#select_states').val();
$.ajax({
type: 'GET',
url: 'http://localhost:8082/JqueryForm/html/jsp/cities_name.jsp',
data: { id : state_id },
dataType: 'json',
success: function (data) {
//populate the cities drop down.
}
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다