用json构建一个下拉菜单

buiding a dropdown with json

本文关键字：一个 下拉菜单 json 构建      更新时间：2023-09-26

要求:我有一个json响应，我想把它转换成dropdown。我使用玉模板来处理迭代，但我有麻烦得到的值。我希望sys_id作为从下拉菜单中选择选项(u_product_name)的值传递。

JS 

result = //result is coming from API but this is what a console.log(result) shows
{ result: 
   [ 
     { sys_id: '7d950856',
       u_product_name: 'ACCESS' },
     { sys_id: '803279e1',
       u_product_name: 'AVAYA' },
     { sys_id: '87484c96',
       u_product_name: 'ADAMO' },
     { sys_id: 'b3b9001a',
       u_product_name: 'ADM' } 
   ]
}

我得到的最接近的东西是使用JSON strigify，虽然这分割每个字母作为一个新的选项。

试试这个，我希望它会工作:

Html: 

<select id="items"></select>

脚本:

 var data={ result: 
                   [ 
                     { sys_id: '7d950856',
                       u_product_name: 'ACCESS' },
                     { sys_id: '803279e1',
                       u_product_name: 'AVAYA' },
                     { sys_id: '87484c96',
                       u_product_name: 'ADAMO' },
                     { sys_id: 'b3b9001a',
                       u_product_name: 'ADM' } 
                   ]
    };
var elemArr = data.result;
var select = document.getElementById( 'items' );
for (options in elemArr) {
select.add( new Option( elemArr[options].u_product_name) );
}

工作演示: https://jsfiddle.net/rohitjindal/ndfv8cy0/

样本

    var data={ result: 
       [ 
         { sys_id: '7d950856',
           u_product_name: 'ACCESS' },
         { sys_id: '803279e1',
           u_product_name: 'AVAYA' },
         { sys_id: '87484c96',
           u_product_name: 'ADAMO' },
         { sys_id: 'b3b9001a',
           u_product_name: 'ADM' } 
       ]
    }
    $.each(data.result, function (key, value) {
        $("#yourdropdownid").append($("<option></option>").val(value.sys_id).html(value.u_product_name));
    });
相关文章：