在javascript中使用jquery和json显示国家和州
嗨，我正在尝试使用jquery在下拉列表中填充国家和州下拉列表 我的json看起来像这样 区块报价在javascript中使用jquery和json显示国家和州,javascript,jquery,json,Javascript,Jquery,Json,嗨，我正在尝试使用jquery在下拉列表中填充国家和州下拉列表 我的json看起来像这样 区块报价 var myjson = [{"countryName":"Afghanistan","countryCode":"AF"},{"countryName":"United States","countryCode":"US" ,"state":["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut"
var myjson = [{"countryName":"Afghanistan","countryCode":"AF"},{"countryName":"United States","countryCode":"US" ,"state":["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},
{"countryName":"United States Minor Outlying Islands","countryCode":"UM"},
{"countryName":"Uruguay","countryCode":"UY","state":["abc","edf"]}];
<body>
<select id = "country" name = "country" onchange= "getvalue()"></select>
<select id = "state" name = "state" onchage="getstate()"></select>
</body>
<script>
function getvalue(){
var country = document.getElementById("country").value;
var divtemp = document.getElementById("test");
for (var i = 0; i < myjson.length; i++ ) {
if(myjson[i].state != null )
{
if(myjson[i].state.length==0){
$("#state").empty();
}
else
{
for(var j = 0 ; j< myjson[i].state.length;j++)
{
if(country === myjson[i].countryName)
{
//alert(country);
//alert(myjson[i].countryName);
//divtemp.innerHTML= myjson[i].state[j] + "<br>"+divtemp.innerHTML;
$("#state").append(
$("<option></option>")
.text(myjson[i].state[j])
);
}
}
}
}
}
</script>
<body>
<select id = "country" name = "country" onchange= "getvalue()"></select>
<select id = "state" name = "state" onchage="getstate()"></select>
</body>
<script>
function getvalue(){
var country = document.getElementById("country").value;
var divtemp = document.getElementById("test");
for (var i = 0; i < myjson.length; i++ ) {
if(myjson[i].state != null )
{
if(myjson[i].state.length==0){
$("#state").empty();
}
else
{
for(var j = 0 ; j< myjson[i].state.length;j++)
{
if(country === myjson[i].countryName)
{
//alert(country);
//alert(myjson[i].countryName);
//divtemp.innerHTML= myjson[i].state[j] + "<br>"+divtemp.innerHTML;
$("#state").append(
$("<option></option>")
.text(myjson[i].state[j])
);
}
}
}
}
}
</script>
函数getvalue（）{
var country=document.getElementById（“国家”）.value；
var divtemp=document.getElementById（“测试”）；
for（var i=0；i”+divtemp.innerHTML；
$（“#状态”）。追加(
$("")
.text（myjson[i].状态[j]）
);
}
}
}
}
}
此脚本函数正在填充状态，但当我选择另一个国家时，状态会附加到早期的状态列表中。我无法确定状态所需的更改。我不想使用Ajax来完成此操作。在国家更改时清除状态组合框
document.getElementById（'state'）。innerHTML=“”；在更改国家/地区时清除状态组合框 document.getElementById（'state'）。innerHTML=“”；试试这个。 在头上做这个
<script>
$(document).ready(
//when the document is loaded, initialize my selectors
function initCountries(){
//put all countries into the country selector
for (cix in myjson){
var options='<option value="'+cix+'">'+myjson[cix].countryName+'</option>';
$("#country").append(options);
}
//listen for the change event when the user chooses a country
$("#country").change(function fillStates(){
//find the country the user chose, then fill the states selector
var cix=$(this).val();
var states=myjson[cix].state;
$("#state").empty();
for (six in states){
var options='<option value="'+states[six]+'">'+states[six]+'</option>';
$("#state").append(options);
}
});
//listen for the change event when the user chooses a state
$("#state").change(function stateSelected(){
//show the state the user chose
var six=$(this).val();
alert(six);
});
});
</script>
$（文件）。准备好了吗(
//加载文档时，初始化我的选择器
职能（国家）{
//将所有国家/地区放入国家/地区选择器
for（myjson中的cix）{
var options=''+myjson[cix].countryName+''；
$（“#国家”）。附加（选项）；
}
//当用户选择国家/地区时，侦听更改事件
$（“#国家”）.change（函数fillStates（）{
//找到用户选择的国家，然后填写状态选择器
var cix=$（this.val（）；
var states=myjson[cix].state；
$（“#state”）.empty（）；
（六个州）{
var选项=''+状态[六]+''；
$（“#状态”）。附加（选项）；
}
});
//当用户选择状态时，侦听更改事件
$（“#状态”）.change（函数状态选择（）{
//显示用户选择的状态
var six=$（this.val（）；
警觉（六）；
});
});
<select id = "country"></select>
<select id = "state"></select>
<script>
$(document).ready(
//when the document is loaded, initialize my selectors
function initCountries(){
//put all countries into the country selector
for (cix in myjson){
var options='<option value="'+cix+'">'+myjson[cix].countryName+'</option>';
$("#country").append(options);
}
//listen for the change event when the user chooses a country
$("#country").change(function fillStates(){
//find the country the user chose, then fill the states selector
var cix=$(this).val();
var states=myjson[cix].state;
$("#state").empty();
for (six in states){
var options='<option value="'+states[six]+'">'+states[six]+'</option>';
$("#state").append(options);
}
});
//listen for the change event when the user chooses a state
$("#state").change(function stateSelected(){
//show the state the user chose
var six=$(this).val();
alert(six);
});
});
</script>
$（文件）。准备好了吗(
//加载文档时，初始化我的选择器
职能（国家）{
//将所有国家/地区放入国家/地区选择器
for（myjson中的cix）{
var options=''+myjson[cix].countryName+''；
$（“#国家”）。附加（选项）；
}
//当用户选择国家/地区时，侦听更改事件
$（“#国家”）.change（函数fillStates（）{
//找到用户选择的国家，然后填写状态选择器
var cix=$（this.val（）；
var states=myjson[cix].state；
$（“#state”）.empty（）；
（六个州）{
var选项=''+状态[六]+''；
$（“#状态”）。附加（选项）；
}
});
//当用户选择状态时，侦听更改事件
$（“#状态”）.change（函数状态选择（）{
//显示用户选择的状态
var six=$（this.val（）；
警觉（六）；
});
});
<select id = "country"></select>
<select id = "state"></select>