Fatal编程技术网
  • javascript/
  • Javascript 需要根据下拉菜单中选择的国家显示不同的json文件

Javascript 需要根据下拉菜单中选择的国家显示不同的json文件

javascript json ajax

Javascript 需要根据下拉菜单中选择的国家显示不同的json文件,javascript,json,ajax,Javascript,Json,Ajax,到目前为止，我可以搜索并让人们知道在搜索框中输入姓名的人的排名 我需要根据用户选择的国家显示我的json。 我已经包含了一个外部json文件。 谢谢你的帮助。 谢谢 这是我的json文件 { "person": [ { "rank": "1", "name": "Kent1", "runScored": "30", "nation": "dhaka" }, {

到目前为止，我可以搜索并让人们知道在搜索框中输入姓名的人的排名

我需要根据用户选择的国家显示我的json。 我已经包含了一个外部json文件。 谢谢你的帮助。 谢谢

这是我的json文件

{
   "person": [
       {
           "rank": "1",
           "name": "Kent1",
           "runScored": "30",
           "nation": "dhaka"
       },
       {
           "rank": "2",
           "name": "Kent2",
           "runScored": "44",
           "nation": "johannesberg"
       },
       {
           "rank": "3",
           "name": "Kent3",
           "runScored": "20",
           "nation": "lahore"
       },
       {
           "rank": "4",
           "name": "Kent4",
           "runScored": "18",
           "nation": "india"
       },
       {
           "rank": "5",
           "name": "Kent5",
           "runScored": "16",
           "nation": "australia"
       },
       {
           "rank": "6",
           "name": "Kent6",
           "runScored": "14",
           "nation": "johannesberg"
       },
       {
           "rank": "7",
           "name": "Kent7",
           "runScored": "12",
           "nation": "australia"
       },
       {
           "rank": "8",
           "name": "Kent8",
           "runScored": "11",
           "nation": "india"
       },
       {
           "rank": "9",
           "name": "Kent9",
           "runScored": "10",
           "nation": "lahore"
       },
       {
           "rank": "10",
           "name": "Kent10",
           "runScored": "6",
           "nation": "dhaka"
       },
       {
           "rank": "11",
           "name": "Kent11",
           "runScored": "44",
           "nation": "colombo"
       },
       {
           "rank": "12",
           "name": "Kent12",
           "runScored": "20",
           "nation": "colombo"
       },
       {
           "rank": "13",
           "name": "Kent13",
           "runScored": "18",
           "nation": "india"
       },
       {
           "rank": "14",
           "name": "Kent14",
           "runScored": "16",
           "nation": "johannesberg"
       },
       {
           "rank": "15",
           "name": "Kent15",
           "runScored": "14",
           "nation": "colombo"
       },
       {
           "rank": "16",
           "name": "Kent16",
           "runScored": "44",
           "nation": "india"
       },
       {
           "rank": "17",
           "name": "Kent17",
           "runScored": "20",
           "nation": "dhaka"
       },
       {
           "rank": "18",
           "name": "Kent18",
           "runScored": "18",
           "nation": "lahore"
       },
       {
           "rank": "19",
           "name": "Kent19",
           "runScored": "16",
           "nation": "australia"
       },
       {
           "rank": "20",
           "name": "Kent20",
           "runScored": "14",
           "nation": "australia"
       }
   ]
}
这是我的密码

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

 function sortFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}


 let dropdown = $('#locality-dropdown');
 dropdown.empty();

// dropdown.append('<option selected="true" disabled>Choose your Nation</option>');
// dropdown.prop('selectedIndex', 0);


 const url = 'http://api.myjson.com/bins/zpaxo';

// Populate dropdown with list of provinces
$.getJSON(url, function (data) {
console.log(data);
  $.each(data, function (key, entry) { 
    dropdown.append($('<option></option>').attr('value', entry.abbreviation).text(entry.name));
  })
});

/*$(document).ready(function(){

    $("#isSelect").click(function () {

    alert($('#country').val());

    });

    $("#selectChina").click(function () {

    $("#country").val("China");

    });

    $("#selectUS").click(function () {

    $("#country").val("United State");

    });

   $("#selectMalaysia").click(function () {

    $("#country").val("Malaysia");

    });

    $("#disableUS").click(function () {

    $("#country option[value='United State']").attr("disabled", true);

    });

    $("#enableUS").click(function () {

    $("#country option[value='United State']").attr("disabled", false);

    });

  });*/
    //$(function() {
    //var people = [];
       //$.getJSON('people.json', function(data) {
       $.ajax({
       url: "p.json",
       dataType: 'json',
       type: 'get',
       cache: false,
       success: function(data){
            $.each(data.person, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.rank + "</td>" +
           "<td>" + f.name + "</td>" +  "<td>" + f.runScored + "</td>" + "<td>" + f.nation + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
           return i<9;
           });          
        }
        });

   //})

//});

function onclickbutton(){
           document.getElementById("button");  
           //var searchField = "name";
           //$.getJSON('p.json', function(data) {

           $.ajax({
            url: "p.json",
            dataType: 'json',
            type: 'get',
            cache: false,
            success: function(data){
            $.each(data.person, function(i, f) {
          //people.sort((a, b) => b.querySelector('.runScored').textContent - a.querySelector('.runScored').textContent);
          //var searchVal = document.getElementById("userinput").value;
          if (f.name == document.forms["myForm"]["name"].value) {
           var tblRow = "<tr>" + "<td>" + f.rank + "</td>" +
           "<td>" + f.name + "</td>" + "<td>" + f.runScored + "</td>" + "<td>" + f.nation + "</td>" + "</tr>"
              $(tblRow).appendTo("#userdata tbody");
              } 
           });          
        }
        });
            //});

    }


</script>

<style>

  h1 {

    font-size: 30px;
    color: #e1e1e1;
    padding-top: 12px;

  }

body {  
  background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
}

table {
    width: 50%;
    border-spacing: 0 0;
    background: #213B4C;
    box-shadow: 0 0 20px #1E3344;
    border-radius: 10px;
    overflow: hidden;
    }


table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
}
table#userdata tr:nth-child(even) {
    background-color: #eee;
}
table#userdata tr:nth-child(odd) {
   background-color: #fff;
}
table#userdata th {
    background-color: grey;
    color: black;
    }

h4 {
color: black;
}    
</style>

</head>
<body>
<div class="leaderboard">
<h1 align="center">
    LEADERBOARD
</h1>

<div class="main" align=center>
<select id="locality-dropdown" name="locality">
<option selected="true" disabled>Choose your Nation</option>
            <option value="India">India</option>
            <option value="Lahore">Lahore</option>
            <option value="Johannesberg">Johannesberg</option>
            <option value="Colombo">Colombo</option>
            <option value="Australia">Australia</option>
            <option value="Dhaka">Dhaka</option>
</select><br>
<!--<input type='button' value='Display Selected' id='isSelect'>
<input type='button' value='Select China' id='selectChina'>
<input type='button' value='Select US' id='selectUS'>
<input type='button' value='Select Malaysia' id='selectMalaysia'>
<input type='button' value='Disable US' id='disableUS'>
<input type='button' value='Enable US' id='enableUS'>-->

<h4>Enter your name to get your Rank Here</h4>

<form name="myForm" action="javascript:void(0);" onsubmit="onclickbutton()" method="get">
Name:  <input type="text" name="name">
<input type="submit" value="Submit">
</form>
<br>
<div class="wrapper">
<div class="profile">
  <table id= "userdata" border="2">
  <thead>
            <th>Rank</th>
            <th>Name</th>
            <th>Runs Scored</th>
            <th>Nation</th>
        </thead>
      <tbody>

       </tbody>
   </table>


</div>
<!--<input id="userinput" type="text" name="searchName"> 
<button id="button" onclick="onclickbutton()">Search</button>-->
<!--</div>
</div>
-->
</div>
</body>
</html>


函数sortFunction（）{
排序（函数（a，b）{返回a.year-b.year}）；
显示汽车（）；
}
let dropdown=$（“#locality dropdown”）；
dropdown.empty（）；
//附加（'选择您的国家'）；
//dropdown.prop（'selectedIndex'，0）；
常量url=http://api.myjson.com/bins/zpaxo';
//用省份列表填充下拉列表
$.getJSON（url、函数（数据）{
控制台日志（数据）；
$.each（数据、函数（键、条目）{
追加（$（''）.attr（'value'，entry.缩写）.text（entry.name））；
})
});
/*$（文档）.ready（函数（）{
$（“#isSelect”）。单击（函数（）{
警报（$（'#country'）.val（））；
});
$（“#选择中国”）。单击（功能（）{
美元（“国家”）.val（“中国”）；
});
$（“#selectUS”）。单击（函数（）{
美元（“国家”）.val（“美国”）；
});
$（“#选择马来西亚”）。单击（功能（）{
美元（“国家”）.val（“马来西亚”）；
});
$（“#禁用”）。单击（函数（）{
$（“#国家/地区选项[value='United State']”）attr（“禁用”，true）；
});
$（“#enableUS”）。单击（函数（）{
$（“#国家/地区选项[value='United State']”）attr（“禁用”，false）；
});
});*/
//$（函数（）{
//var people=[]；
//$.getJSON（'people.json'，函数（数据）{
$.ajax({
url:“p.json”，
数据类型：“json”，
键入：“get”，
cache:false，
成功：功能（数据）{
每人$（数据、人员、职能（i、f）{
var tblRow=“+”+f.rank+“”+
“+f.name+”+“+f.runScored+”+“+f.nation+”+”
$（tblRow）.appendTo（“#userdata tbody”）；
返回i b.querySelector（'.runScored'）.textContent-a.querySelector（'.runScored'）.textContent）；
//var searchVal=document.getElementById（“userinput”）.value；
if（f.name==document.forms[“myForm”][“name”].value）{
var tblRow=“+”+f.rank+“”+
“+f.name+”+“+f.runScored+”+“+f.nation+”+”
$（tblRow）.appendTo（“#userdata tbody”）；
} 
});          
}
});
//});
}
h1{
字体大小：30px；
颜色：#e1e1；
填充顶部：12px；
}
正文{
背景：径向梯度（中心顶部的椭圆最远角，#f39264 0%，#f2606f 100%）；
}
桌子{
宽度：50%；
边界间距：0；
背景：#213B4C；
盒影：0 0 20px#1E3344；
边界半径：10px；
溢出：隐藏；
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充：10px；
文本对齐：左对齐；
}
表#userdata tr:n子项（偶数）{
背景色：#eee；
}
表#userdata tr:n子项（奇数）{
背景色：#fff；
}
表#用户数据th{
背景颜色：灰色；
颜色：黑色；
}
h4{
颜色：黑色；
}    
排行榜
选择你的国家
印度
拉合尔
约翰内斯伯格
科伦坡
澳大利亚
达卡


在此处输入您的姓名以获得您的排名
姓名：


等级
名称
得分
国家


函数sortFunction（）{
汽车.分类（功能（a，b）{
返回a年-b年
});
显示汽车（）；
}
let dropdown=$（“#locality dropdown”）；
dropdown.empty（）；
//附加（'选择您的国家'）；
//dropdown.prop（'selectedIndex'，0）；
常量url=http://api.myjson.com/bins/zpaxo';
//用省份列表填充下拉列表
$.getJSON（url、函数（数据）{
$。每个（数据、功能（键、条目）{
追加（$（''）.attr（'value'，entry.缩写）.text（entry.name））；
})
});
/*$（文档）.ready（函数（）{
$（“#isSelect”）。单击（函数（）{
警报（$（'#country'）.val（））；
});
$（“#选择中国”）。单击（功能（）{
美元（“国家”）.val（“中国”）；
});
$（“#selectUS”）。单击（函数（）{
美元（“国家”）.val（“美国”）；
});
$（“#选择马来西亚”）。单击（功能（）{
美元（“国家”）.val（“马来西亚”）；
});
$（“#禁用”）。单击（函数（）{
$（“#国家/地区选项[value='United State']”）attr（“禁用”，true）；
});
$（“#enableUS”）。单击（函数（）{
$（“#国家/地区选项[value='United State']”）attr（“禁用”，false）；
});
});*/
//$（函数（）{
//var people=[]；
//$.getJSON（'people.json'，函数（数据）{
$.ajax({
url:url，
数据类型：“json”，
键入：“get”，
cache:false，
成功：功能（数据）{
每人$（数据、人员、职能（i、f）{
var tblRow=“+”+f.rank+“”+
“+f.name+”+“+f.runScored+”+“+f.nation+”+”
$（tblRow）.appendTo（“#userdata tbody”）；
返回i<9；
});
}
});
//})
//});
函数onclickbutton（）{
document.getElementById（“按钮”）；
//var searchField=“name”；
//$.getJSON（'p.json'，函数（数据）{
$.ajax({
url:url，
数据类型：“json”，
键入：“get”，
cache:false，
成功：功能（数据）{
每人$（数据、人员、职能（i、f）{
//people.sort（（a，b）=>b.querySelector（'.runScored'）.textContent-a.querySelector（'.runScored'）.textContent）；
//var searchVal=document.getElementById（“userinput”）.value；
if（f.name==document.forms[“myForm”][“name”].value）{
var tblRow=“+”+f.rank+“”+