绑定API将数据返回到下拉列表 [英] Bind API returned data to dropdownlist

查看：47
本文介绍了绑定API将数据返回到下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试通过javascript / jquery绑定下拉列表（任何人都可以）。这是我试过的代码 -

I am trying to bind a dropdown list via javascript/jquery (anyone will work). Here is my code I tried - 

$(document).ready(function () {  
   $.ajax({  
       type:"POST",
     url: "function.php",
     //dataType: "json"
     success: function(result){
     alert(result);
        for (var i in result) {
            $("#dropdownlist").append('<option value="'+result[i]+'">'+result[i]+'</option>');
    };

     }
  });

}）;

警告时，它显示的数据如下 -

On alert, it is showing data like this -


{BU_CODE_RU：DK} {BU_CODE_RU：PL} {BU_CODE_RU：SA} {BU_CODE_RU：SP } { BU_CODE_RU： RS} { BU_CODE_RU： IS} { BU_CODE_RU： SE} { BU_CODE_RU： LT} { BU_CODE_RU： GR} { BU_CODE_RU ： AT} { BU_CODE_RU： DE} { BU_CODE_RU： TR} { BU_CODE_RU： CZ} { BU_CODE_RU： US} { BU_CODE_RU： TW} { BU_CODE_RU： TH} { BU_CODE_RU： EG} { BU_CODE_RU： SI} { BU_CODE_RU： HU} { BU_CODE_RU： JP} { BU_CODE_RU： IN} {BU_CO DE_RU ： CA } { BU_CODE_RU ： UNK } { BU_CODE_RU ： MA } { BU_CODE_RU ： NL } { BU_CODE_RU ： RU } { BU_CODE_RU ： 香港} { BU_CODE_RU ： ID } { BU_CODE_RU ： FR } { BU_CODE_RU ： IT } { BU_CODE_RU ： ES } { BU_CODE_RU ： 否 } { BU_CODE_RU ： BE } { BU_CODE_RU ： KR } { BU_CODE_RU ： MY } { BU_CODE_RU ： FI } { BU_CODE_RU ： DO } { BU_CODE_RU ： KW } { BU_CODE_RU： SK} { BU_CODE_RU： GB} { BU_CODE_RU： AE} { BU_CODE_RU： IL} { BU_CODE_RU： BG} { BU_CODE_RU ： AUW} { BU_CODE_RU： SG} { BU_CODE_RU： BH} { BU_CODE_RU： QA} { BU_CODE_RU： LV} { BU_CODE_RU： AU} { BU_CODE_RU： HR} { BU_CODE_RU： CY} { BU_CODE_RU： IE} { BU_CODE_RU： UA} { BU_CODE_RU： CE} { BU_CODE_RU： CN} { BU_CODE_RU： CH} { BU_CODE_RU： RO} { BU_CODE_RU： PT} { BU_CODE_RU： PH} { BU_CODE_RU： JO}

{"BU_CODE_RU":"DK"}{"BU_CODE_RU":"PL"}{"BU_CODE_RU":"SA"}{"BU_CODE_RU":"SP"}{"BU_CODE_RU":"RS"}{"BU_CODE_RU":"IS"}{"BU_CODE_RU":"SE"}{"BU_CODE_RU":"LT"}{"BU_CODE_RU":"GR"}{"BU_CODE_RU":"AT"}{"BU_CODE_RU":"DE"}{"BU_CODE_RU":"TR"}{"BU_CODE_RU":"CZ"}{"BU_CODE_RU":"US"}{"BU_CODE_RU":"TW"}{"BU_CODE_RU":"TH"}{"BU_CODE_RU":"EG"}{"BU_CODE_RU":"SI"}{"BU_CODE_RU":"HU"}{"BU_CODE_RU":"JP"}{"BU_CODE_RU":"IN"}{"BU_CODE_RU":"CA"}{"BU_CODE_RU":"UNK"}{"BU_CODE_RU":"MA"}{"BU_CODE_RU":"NL"}{"BU_CODE_RU":"RU"}{"BU_CODE_RU":"HK"}{"BU_CODE_RU":"ID"}{"BU_CODE_RU":"FR"}{"BU_CODE_RU":"IT"}{"BU_CODE_RU":"ES"}{"BU_CODE_RU":"NO"}{"BU_CODE_RU":"BE"}{"BU_CODE_RU":"KR"}{"BU_CODE_RU":"MY"}{"BU_CODE_RU":"FI"}{"BU_CODE_RU":"DO"}{"BU_CODE_RU":"KW"}{"BU_CODE_RU":"SK"}{"BU_CODE_RU":"GB"}{"BU_CODE_RU":"AE"}{"BU_CODE_RU":"IL"}{"BU_CODE_RU":"BG"}{"BU_CODE_RU":"AUW"}{"BU_CODE_RU":"SG"}{"BU_CODE_RU":"BH"}{"BU_CODE_RU":"QA"}{"BU_CODE_RU":"LV"}{"BU_CODE_RU":"AU"}{"BU_CODE_RU":"HR"}{"BU_CODE_RU":"CY"}{"BU_CODE_RU":"IE"}{"BU_CODE_RU":"UA"}{"BU_CODE_RU":"CE"}{"BU_CODE_RU":"CN"}{"BU_CODE_RU":"CH"}{"BU_CODE_RU":"RO"}{"BU_CODE_RU":"PT"}{"BU_CODE_RU":"PH"}{"BU_CODE_RU":"JO"}

如何将这些值绑定到下拉列表（仅限值）。如果我可以添加选择国家/地区之类的默认值会更好。

How to bind those values to Dropdown List (Only Value). It will be better if I can add Default Value something like "Select Country".

推荐答案

如果回复是一个字符串，你可以使用正则表达式

If response is a string, you can use a regex

const data = `{"BU_CODE_RU":"DK"}{"BU_CODE_RU":"PL"}{"BU_CODE_RU":"SA"}{"BU_CODE_RU":"SP"}{"BU_CODE_RU":"RS"}{"BU_CODE_RU":"IS"}{"BU_CODE_RU":"SE"}{"BU_CODE_RU":"LT"}{"BU_CODE_RU":"GR"}{"BU_CODE_RU":"AT"}{"BU_CODE_RU":"DE"}{"BU_CODE_RU":"TR"}{"BU_CODE_RU":"CZ"}{"BU_CODE_RU":"US"}{"BU_CODE_RU":"TW"}{"BU_CODE_RU":"TH"}{"BU_CODE_RU":"EG"}{"BU_CODE_RU":"SI"}{"BU_CODE_RU":"HU"}{"BU_CODE_RU":"JP"}{"BU_CODE_RU":"IN"}{"BU_CODE_RU":"CA"}{"BU_CODE_RU":"UNK"}{"BU_CODE_RU":"MA"}{"BU_CODE_RU":"NL"}{"BU_CODE_RU":"RU"}{"BU_CODE_RU":"HK"}{"BU_CODE_RU":"ID"}{"BU_CODE_RU":"FR"}{"BU_CODE_RU":"IT"}{"BU_CODE_RU":"ES"}{"BU_CODE_RU":"NO"}{"BU_CODE_RU":"BE"}{"BU_CODE_RU":"KR"}{"BU_CODE_RU":"MY"}{"BU_CODE_RU":"FI"}{"BU_CODE_RU":"DO"}{"BU_CODE_RU":"KW"}{"BU_CODE_RU":"SK"}{"BU_CODE_RU":"GB"}{"BU_CODE_RU":"AE"}{"BU_CODE_RU":"IL"}{"BU_CODE_RU":"BG"}{"BU_CODE_RU":"AUW"}{"BU_CODE_RU":"SG"}{"BU_CODE_RU":"BH"}{"BU_CODE_RU":"QA"}{"BU_CODE_RU":"LV"}{"BU_CODE_RU":"AU"}{"BU_CODE_RU":"HR"}{"BU_CODE_RU":"CY"}{"BU_CODE_RU":"IE"}{"BU_CODE_RU":"UA"}{"BU_CODE_RU":"CE"}{"BU_CODE_RU":"CN"}{"BU_CODE_RU":"CH"}{"BU_CODE_RU":"RO"}{"BU_CODE_RU":"PT"}{"BU_CODE_RU":"PH"}{"BU_CODE_RU":"JO"}`

// success: function(data) {
 
   var options = data.match(/:"(\w+)/g)
  .map(cc => { 
    cc = cc.replace(/\W+/g,""); // remove non-letters
    return `<option value="${cc}">${cc}</option>`;
  });
 
   $("#dropdownlist").append(options);
 
// }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdownlist">
<option value="">Please select</option>
</select>

使用lookbehind更优雅，Jonathan Lam向我指出

Even more elegant using lookbehind, pointed out to me by Jonathan Lam

const data = `{"BU_CODE_RU":"DK"}{"BU_CODE_RU":"PL"}{"BU_CODE_RU":"SA"}{"BU_CODE_RU":"SP"}{"BU_CODE_RU":"RS"}{"BU_CODE_RU":"IS"}{"BU_CODE_RU":"SE"}{"BU_CODE_RU":"LT"}{"BU_CODE_RU":"GR"}{"BU_CODE_RU":"AT"}{"BU_CODE_RU":"DE"}{"BU_CODE_RU":"TR"}{"BU_CODE_RU":"CZ"}{"BU_CODE_RU":"US"}{"BU_CODE_RU":"TW"}{"BU_CODE_RU":"TH"}{"BU_CODE_RU":"EG"}{"BU_CODE_RU":"SI"}{"BU_CODE_RU":"HU"}{"BU_CODE_RU":"JP"}{"BU_CODE_RU":"IN"}{"BU_CODE_RU":"CA"}{"BU_CODE_RU":"UNK"}{"BU_CODE_RU":"MA"}{"BU_CODE_RU":"NL"}{"BU_CODE_RU":"RU"}{"BU_CODE_RU":"HK"}{"BU_CODE_RU":"ID"}{"BU_CODE_RU":"FR"}{"BU_CODE_RU":"IT"}{"BU_CODE_RU":"ES"}{"BU_CODE_RU":"NO"}{"BU_CODE_RU":"BE"}{"BU_CODE_RU":"KR"}{"BU_CODE_RU":"MY"}{"BU_CODE_RU":"FI"}{"BU_CODE_RU":"DO"}{"BU_CODE_RU":"KW"}{"BU_CODE_RU":"SK"}{"BU_CODE_RU":"GB"}{"BU_CODE_RU":"AE"}{"BU_CODE_RU":"IL"}{"BU_CODE_RU":"BG"}{"BU_CODE_RU":"AUW"}{"BU_CODE_RU":"SG"}{"BU_CODE_RU":"BH"}{"BU_CODE_RU":"QA"}{"BU_CODE_RU":"LV"}{"BU_CODE_RU":"AU"}{"BU_CODE_RU":"HR"}{"BU_CODE_RU":"CY"}{"BU_CODE_RU":"IE"}{"BU_CODE_RU":"UA"}{"BU_CODE_RU":"CE"}{"BU_CODE_RU":"CN"}{"BU_CODE_RU":"CH"}{"BU_CODE_RU":"RO"}{"BU_CODE_RU":"PT"}{"BU_CODE_RU":"PH"}{"BU_CODE_RU":"JO"}`

// success: function(data) {
  $("#dropdownlist").append(
    data.match(/(?<=:")(\w+)/g)
    .map(cc => `<option value="${cc}">${cc}</option>`)
  )

// }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdownlist">
  <option value="">Please select</option>
</select>

注意：JS RegExp lookbehind（ES2018草案）的浏览器支持仍然很低。请参阅MDN上的兼容性表更多详情。

Note: Browser support for JS RegExp lookbehind (ES2018 draft) is still low. See the compatibility table on MDN for more details.

更简单格式的原始答案（ {DK } {PL} {SA} .... ）：

Original answer for simpler format ({"DK"}{"PL"}{"SA"}....) :

var options = data.match(/[A-Z]{2,}/g).map(cc => `<option value="${cc}">${cc}</option>`)


const data = `{"DK"}{"PL"}{"SA"}{"SP"}{"RS"}{"IS"}{"SE"}{"LT"}{"GR"}{"AT"}{"DE"}{"TR"}{"CZ"}{"US"}{"TW"}{"TH"}{"EG"}{"SI"}{"HU"}{"JP"}{"IN"}{"CA"}{"UNK"}{"MA"}{"NL"}{"RU"}{"HK"}{"ID"}{"FR"}{"IT"}{"ES"}{"NO"}{"BE"}{"KR"}{"MY"}{"FI"}{"DO"}{"KW"}{"SK"}{"GB"}{"AE"}{"IL"}{"BG"}{"AUW"}{"SG"}{"BH"}{"QA"}{"LV"}{"AU"}{"HR"}{"CY"}{"IE"}{"UA"}{"CE"}{"CN"}{"CH"}{"RO"}{"PT"}{"PH"}{"JO"}`

// success: function(data) {
var options = data.match(/[A-Z]{2,}/g).map(cc => `<option value="${cc}">${cc}</option>`)
$("#dropdownlist").append(options);
// }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdownlist">
  <option value="">Please select</option>
</select>

这篇关于绑定API将数据返回到下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆