JSON级联表单实例_js

动态下拉列表的原理其实很简单的，当某一下拉列表触发了onchange事件，然后使用AJAX在后台向服务器异步请求数据，最后将服务器返回的数据进行解析后动态添加到指定的select上即可！
首先来看后台的数据输出，我们假设服务器传送给客户段的jsON数据格式为如下：
{
    "options" : [
        {"value" : 值,"text" : 文本},
        {"value" : 值,"text" : 文本},
        {"value" : 值,"text" : 文本}
        ]
}
其中options是整个JSON对象的标识符，它是一个数组，该数组中的每一个值表示一个select中的option，当然该值也是一个对象了，有两个属性，一个是value，一个是text，分别对应option中的value和显示的text值。
有了数据格式，那么客户端和服务器端进行交流就方便很多了。我们来先写客户端的JS方法。这里我是提供一个静态的实用类Select，专门针对select元素的操作方法，如下：
//针对select操作的实用Select类
function Select(){};
//根据指定的JSON对象来生成指定的select的options项（清除原来的options）.
Select.create = function(/*string*/selectId,/*json object*/json) {
 Select.clear(selectId);
 Select.add(selectId, json);
};
//该方法同create,只不过是在原来的基础上进行追加
Select.add = function(/*string*/selectId,/*json object*/json) {
 try {
  if (!json.options) return;
  for (var i = 0; i < json.options.length; i ++) {
   Select.addOption(selectId,json.options[i].value,json.options[i].text);
  }
 } catch (ex) {
  base.alert(‘设置select错误：指定的JSON对象不符合Select对象的解析要求！’);
 }
};
//创建一个options并返回
Select.createOption = function(/*string*/value, /*string*/text) {
 var opt = document.createElement(‘option’);
 opt.setAttribute(‘value’, value);
 opt.innerhtml = text;
 return opt;
};
// 给指定的select添加一个option,并返回当前option对象
Select.addOption = function(/*string*/selectId, /*string*/value, /*string*/text) {
 var opt = Select.createOption(value, text);
 $(selectId).appendChild(opt);
 return opt;
};
//获取指定select的当前被选中的options对象，如果为多选且有多个被选中则返回数组.
Select.getSelected = function(/*string*/selectId) {
 var slt = $(selectId);
 if (!slt) return null;
 if (slt.type.toLowerCase() == "select-multiple") {
  var len = Select.len(selectId);
  var result = [];
  for (var i = 0; i < len; i ++) {
   if (slt.options[i].selected) result.push(slt.options[i]);
  }
  return result.length > 1 ? result : (result.length == 0 ? null : result[0]);
 } else {
  var index = $(selectId).selectedIndex;

欢迎大家阅读《JSON级联表单实例_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)