一个简单的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]; }
相关推荐
JSON JQuery + Servlet +Json实现下拉框级联 json-lib-2.4-jdk15.jar所依赖jar的整理整理
有时数据报表里的字段填充下拉框速度太慢,但通过建一个配置表,用该配置表的数据填充下拉框速度会很快
JQ JS javascript bootstrap 带搜索 下拉框 select
jQGrid动态填充select下拉框的选项值(动态填充)
DWR ,addOptions()填充下拉框,addRows()填充表格 希望对你的学习有所帮助,有不足的地方 感谢留言指点。。。。
struts2中 页面加载时动态填充下拉框的例子,用于向数据库请求数据进行填充。通过Action中的方法进行请求数据,来初始化Action中的属性,以便页面上的使用。包含jar包。
一个超强的一个javascript 制作的 日历下拉框
JavaScript 实现连动下拉框 JavaScript 实现连动下拉框
asp利用json的两个下拉框联动示例代码,具体说明请看 http://blog.csdn.net/aspgreener/archive/2007/09/13/1783834.aspx
JavaScript应用实例-下拉框控制文本框表驱动.js
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.docx
里面有jar包,和伪码 使用jsquery插件级联的,有我的代码注释,不懂可以给本人留言
最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N 代码如下:”forntName”>部门 ”inpBox”> <select name=”department” id=”department” onchange=”change();” style=”width...
很好用的一款插件,针对于自己定义的下拉列表
里面提供 并解决所有获得select下拉框里面的值 很有帮助
参照 http://blog.csdn.net/psp0001060/article/details/49388459 主要介绍javascript动态追加或减少下拉框,以及对应Java端接受新追加的下拉框参数。
javascript实现下拉框二级联动 思路清晰 简明易懂 效果惊人
本文介绍了如何利用JavaScript动态改变下拉框的属性
NULL 博文链接:https://javasam.iteye.com/blog/1780128
可编辑的下拉可编辑的下拉框(JavaScript)框(JavaScript)