一个简单的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 οnlοad=init()>
<h2>Parsing JSON Map</h2>
<select id="selector" οnchange=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];
}
扫一扫
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
