JavaScript利用JSON填充下拉框

一个简单的js小轮子。先说应用场景:
  • 以json字符串的形式拿到map,如'{"key1":"value1","key2":"value2","key3":"value3"}'
  • 需要遍历该map的键,并利用键的集合生成下拉框的option
  • 选择该下拉框中的某一项时,需要得到该键对应的值


JavaScript利用JSON填充下拉框
 

首先将利用JSON.parse()方法解析传入的jsonStr,得到对应的Object。

var jsonStr = '{"key1":"value1","key2":"value2","key3":"value3"}';
var obj = JSON.parse(jsonStr);

 

在onload方法中初始化下拉框(select)的值。其中selector2设置为不可编辑,用于显示选择的值。

<body onload=init()>

<h2>Parsing JSON Map</h2>
<select id="selector" onchange=selectorChange(this.value)></select>
<select id="selector2" disabled=true></select>

</body>

 

遍历json obj中的键,创建option,设置option的值和显示文本,并将其追加到selector。更多Js操作select的方法可参见 Js操作select相关方法

 

function init(){  
  var selector = document.getElementById("selector");
  var selector2 = document.getElementById("selector2");
  for(var key in obj){
   var opt = document.createElement("option");
   opt.value = key;
   opt.innerText = key;
   selector.appendChild(opt);
   
   var opt2 = document.createElement("option");
   opt2.value = obj[key];
   opt2.innerText = obj[key];
   selector2.appendChild(opt2);
  }
}  

 

selector的onChange方法,将key(selector当前被选择的值)对应的value(从obj中找到)赋给selector2

 function selectorChange(value) {
  var selector2 = document.getElementById("selector2");
  selector2.value=obj[value];
 }

 完整示例

你可能感兴趣的:(js,json,dropdown,select)