Раскрывающийся список с использованием ajax и jquery

У меня есть раскрывающееся меню с некоторым значением, если я изменяю это значение на основе того, что отобразит другое раскрывающееся меню со значением из базы данных mysql, заменив текст ниже первого раскрывающегося списка. Я делаю этот процесс на странице jsp. Вторичные значения выпадающего списка поступают из базы данных при изменении первого раскрывающегося списка. Моя база данных содержит две таблицы: одну для страны и другую для таблицы city.country, которая содержит поля countryid и country_name, а в таблице города - поля cityid, countryid и city_name.Below - мой код, который я сделал до сих пор. Мне нужно реализовать ajax и jquery? Не могли бы вы дать мне код для кода сервлета fetchCites для заполнения второго выпадающего списка без использования каких-либо страниц php или .net.Раскрывающийся список с использованием ajax и jquery

<%@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>

источник

2014-01-03 user2986084

попробовать эту вещь в вашем кодировании

<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 код

$(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(); 
    } 
});

источник

2014-01-03 05:01:14 user3097973

Извините, я не могу использовать страницы php или .net здесь – user2986084

Предположим, если вы хотите, чтобы заполнить данное состояние DropDown

<SELECT NAME="sate" id="sate"> 

    </SELECT>

Ваш JSON должен быть

[{ 
    "state": "MP" 
}, 
{ 
    "sate": "UP" 
}]

и использовать следующий код, чтобы заполнить выпадающий государства. Он вызывает вызов ajax и получает ответ как объект ajax, который является массивом ajax и выполняет итерацию по массиву.

function getStateDropdown() { 
    var w = document.myform.mylist.selectedIndex; 
    var country_id = document.myform.mylist.options[w].value; 

    $.ajax({ 
     url : 'fetchState.do?countryid=' + country_id, 
     success : function(data) { 
      $.each(data, function(i, val) { 
       $("#state").append(
         "<option value=" + i + ">" + val.state+ "</option>"); 
      }); 
     } 
    }); 
}

источник

2014-01-03 06:01:04

Раскрывающийся список с использованием ajax и jquery

ответ

Смежные вопросы