JavaScript利用JSON填充下拉框

Cwind

浏览: 265774 次
性别:
来自: 杭州

最近访客更多访客>>

hcwdev

wwj_415259272

chinaagan

gsm0251321

博主相关

博客

微博

相册

留言

关于我

博客专栏

: LeetCode题解
浏览量：53671

文章分类

社区版块

存档分类

博客分类：

JavaScript

js json dropdown select

一个简单的js小轮子。先说应用场景：

以json字符串的形式拿到map，如'{"key1":"value1","key2":"value2","key3":"value3"}'
需要遍历该map的键，并利用键的集合生成下拉框的option
选择该下拉框中的某一项时，需要得到该键对应的值

首先将利用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];
 }

完整示例

查看图片附件

3
顶

4
踩

分享到：

Object.equals方法：重载还是覆盖 | LeetCode[Math] - #9 Palindrome Number

2015-04-15 08:24
浏览 5743
评论(4)
分类:Web前端
查看更多

4 楼 Cwind 2015-04-15

Vity 写道

jquery-tmpl 谁用谁知道

是的，它是个成型的大轮子，我这是个小螺钉

3 楼 Cwind 2015-04-15

thc1987 写道

支持下,或许使用selector.options.add(new Option(text,value));代码更简洁点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <script type="text/javascript">
  var obj = {"key1":"value1","key2":"value2","key3":"value3"};  
function init(){  
  var selector = document.getElementById("selector");
  var selector2 = document.getElementById("selector2");
  var selectorOpts = selector.options;
  var selector2Opts = selector2.options;

  for(var key in obj){
   selectorOpts.add(new Option(key,key));
   
   selector2Opts.add(new Option(obj[key],obj[key]));
  }
}  
 function selectorChange(value) {
  var selector2 = document.getElementById("selector2");
  selector2.value=obj[value];
 }
  </script>
 </head>
<body onload=init()>
	<h2>Parsing JSON Map</h2>
	<select id="selector" onchange=selectorChange(this.value)></select>
	<select id="selector2" disabled=true></select>
</body>
</html>

的确如此，非常感谢！

2 楼 Vity 2015-04-15

jquery-tmpl 谁用谁知道

1 楼 thc1987 2015-04-15