Question

我有一个JSON文件，其中包含两个键的国家/地区列表：“name”和“areacode”。我有一个带有值attr的选项列表的下拉列表与JSON文件中的“name”键相同。

长话短说：当下拉列表中的选定选项与JSON文件中的“name”值匹配时，我想在json文件中显示“areacode”值

更新

我已在此处粘贴代码：http://codepen.io/sarfehjou/pen/RpKMWE

唯一的区别是，在我的解决方案中，我必须通过URL获取JSON文件

HTML

  <select>
   <option value="Afghanistan GLOBAL">Afghanistan GLOBAL</option>
   <option value="Albenter code hereania">Albania</option>
   <option value="Algeria">Algeria</option>
   <option value="American Samoa">American Samoa</option>
   <option value="Andorra">Andorra</option>
 </select>

脚本

    var list = {
    "countries": [
        {
            "name": "Afghanistan GLOBAL",
            "areacode": ""
        },
        {
            "name": "Albania",
            "areacode": ""
        },
        {
            "name": "Algeria",
            "areacode": ""
        },
        {
            "name": "American Samoa",
            "areacode": ""
        },
        {
            "name": "Andorra",
            "areacode": ""
        }
      ]
    }

Answer 1

您的问题已经确定很模糊，即不确定您需要对区号和内容做些什么？无论如何这是我能解决的问题：

基本上在select上添加了一个事件监听器，每当你更改它时，从列表中查找值（列表可以来自服务器或缓存）。

看看，如果你有更多的想法要求更多。

＆＃13;

@TearDown

＆＃13;

    var list = {
    "countries": [
        {
            "name": "Afghanistan GLOBAL",
            "areacode": "8787"
        },
        {
            "name": "Albania",
            "areacode": "446"
        },
        {
            "name": "Algeria",
            "areacode": "212"
        },
        {
            "name": "American Samoa",
            "areacode": "767"
        },
        {
            "name": "Andorra",
            "areacode": "5454"
        }
      ]
    }
    
    var countrySelect = document.getElementById('countrySelect');
    
    countrySelect.addEventListener('change', function(e)  {
      console.log(this.value);
      console.log(findAreaCode(this.value));
    });
    
    function findAreaCode(name) {
      var resultItems = list.countries.filter(function(currentItem) {
        return currentItem.name == name;
      })
      console.log(resultItems[0]);
      
      return resultItems[0]? resultItems[0].areacode: 'N/A';
    }

＆＃13;

Answer 2

我已将代码粘贴到她身上：http://codepen.io/sarfehjou/pen/RpKMWE

唯一不同的是，在我的解决方案中，我必须通过URL获取json文件

  <select>
   <option value="Afghanistan GLOBAL">Afghanistan GLOBAL</option>
   <option value="Albenter code hereania">Albania</option>
   <option value="Algeria">Algeria</option>
   <option value="American Samoa">American Samoa</option>
   <option value="Andorra">Andorra</option>
 </select> 

    var list = {
    "countries": [
        {
            "name": "Afghanistan GLOBAL",
            "areacode": ""
        },
        {
            "name": "Albania",
            "areacode": ""
        },
        {
            "name": "Algeria",
            "areacode": ""
        },
        {
            "name": "American Samoa",
            "areacode": ""
        },
        {
            "name": "Andorra",
            "areacode": ""
        }
      ]
    }

Answer 3

要回答您的问题，您可以这样做，

$.getJSON("http://api/somejsonfile/",function(data){
    // Initializing an empty array
    var options=[];
    // Running a loop on the response JSON and adding the options to a string array
    $.each(data.countries,function(id,eachcountry){
        options.push("<option value='"+eachcountry.areacode+"'>"+eachcountry.name+"</option>");
    });
    // Joining the string and replacing it inside the select element 
    $(".dropdown").html(options.join(""));
});

这是一个粗略的实现，因此可能存在一些语法问题!!

添加一个简单的例子

$(document).ready(function(){
// This is a sample country code JSON from Github
$.getJSON("https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json",function(data){
    	// Initializing an empty array
    	var options=[];
    	// Running a loop on the response JSON and adding the options to a string array
    	$.each(data,function(id,eachcountry){
    		options.push("<option value='"+eachcountry.dial_code+"'>"+eachcountry.name+"</option>");
    	});
    	// Joining the string and replacing it inside the select element 
    	$(".dropdown").html(options.join(""));
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown">
  <option value="">Select</option>
</select>

根据选定的下拉选项过滤JSON

3 个答案: