0
我試圖做一個窗體下拉可靠的選項，問題是，我可以只使用HTML，Javascript和Ajax，沒有數據庫，所以我必須直接填寫選項使用jQuery，到目前爲止，這是我得到了什麼，但沒有工作，任何幫助將真棒，謝謝:)從數組填充依賴下拉列表使用AJAX Jquery
$(document).ready(function(){
var countries = [
{
"id": "1",
"name": "Mexico"
},
{
"id": "2",
"name": "USA"
},
{
"id": "3",
"name": "Canada"
}
]
var states = {
'mexico': [{
display: "Ciudad de Mexico",
value: "mx-city"
}, {
display: "Jalisco",
value: "jalisco"
}],
'usa': [{
display: "Texas",
value: "texas"
}, {
display: "Ohio",
value: "ohio"
}],
'canada': [{
display: "Montreal",
value: "montreal"
}, {
display: "Toronto",
value: "toronto"
}]
};
var states = {
'mx-city': [{
display: "Benito Juarez",
value: "benito-juarez"
}, {
display: "Cuauhtemoc",
value: "cuauhtemoc"
}],
'jalisco': [{
display: "Zapopan",
value: "zapopan"
}, {
display: "Guadalajara",
value: "Guadalajara"
}],
'texas': [{
display: "San Antonio",
value: "san-antonio"
}, {
display: "Austin",
value: "austin"
}],
'ohio': [{
display: "Colombus",
value: "colombus"
}, {
display: "Cleveland",
value: "cleveland"
}],
'montreal': [{
display: "Quebec",
value: "Quebec"
}, {
display: "Vermont",
value: "vermont"
}],
'toronto': [{
display: "Ontario",
value: "ontario"
}, {
display: "York",
value: "york"
}]
};
$("#country").on('click',function() {
var pais = $(this).val();
$("#country").find("option").remove();
$(countries).each(function (i) {
$("#country").append('<option id="'+countries[i].id+'">'+countries[i].name+"</option>");
});
console.log(pais);
});
function list(array_list){
$("#child_selection").html("");
$(array_list).each(function (i) {
$("#child_selection").append('<option value="'+array_list[i].value+'">'+array_list[i].display+"</option>");
});
}
$('#child_selection').change(function() {
var state = $(this).val();
if (states[state] == undefined) {
return $("#child").text('Selecciona tu ciudad');
}
list(states[state]);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><form action="" method="" enctype="application/json">
<br/>Nombre: <input type="text" />
<br/>Edad: <input type="text" />
<br/>Pais:
<select name="country" id="country">
<option value="">Selecciona tu pais</option>
</select>
<br />Estado:
<select name="child_selection" id="child_selection">
<option value="">Selecciona tu estado</option>
</select>
<br/>Ciudad:
<select name="child" id="child">
<option value="">Selecciona tu ciudad</option>
</select>
<input type="submit" value="Submit" />
</form>
這完美地工作，太感謝你了，真的！ –
不客氣。總是樂於幫助:) – Manish
另一個小問題，如果我將例如墨西哥更改爲「Selecciona tu pais」，以便可靠值返回原始文本，我該如何返回默認值？ –