自动创建selectbox的多级联动下拉框

by GiK

这里面用到了我前面写的那个数据存取对象

<script type="text/javascript">
function $(o) {
return document.getElementById(o);
}

game = {
code : new String(),
lv    : new Number(),
set   : function(code){
    this.code = code;
    switch(code.substr(0,3)){
        case ‘001’:
            game.lv = 3;
            break;
        case ‘002’:
            game.lv = 2;;
            break;
    }
}
}
<?php
$code = array_flip(LJSConfig::$game_level);
?>
game.set(‘<?= array_shift($code) ?>’);
var server_code = "001002003001";
comboBox = {
    target   : $(‘catbox’),//where to add the selectbox
    sels : new Object(),
   
    init : function(){
    this.sels.length = new Number(0);
    for(var i=0; i<4; i++){
        this.sels[i] = document.createElement("select");
        this.sels[i].id = "sl" + i;//set element id
        if(i == 0){
        this.sels[i].onchange = function(){
          comboBox.selectChange(this.id.charAt(this.id.length – 1));
          comboBox.hide(game.lv);
        }
        } else {
        this.sels[i].onchange = function(){
          comboBox.selectChange(this.id.charAt(this.id.length – 1));
        }
        }
        this.sels.length++;
        this.target.appendChild(this.sels[i]);
    }
    this.createOptions("0",this.sels[0]);
    this.selectChange(0,1);
    },
   
    selectChange : function (level)
{
    level = new Number(level); //change type to number
    var selectObj = this.sels[level];
    if(level == 0){
      game.set(selectObj.value);
    }
    if( level >= game.lv )
    {return;}
   
    var nextSelectObj = this.sels[level+1];
    nextSelectObj.options.length = 0;//clear next select box
    nextSelectObj.style.display = "";
    var currentCode = selectObj.value;
    this.createOptions(currentCode,nextSelectObj);
   
    if( ( level + 1 ) < game.lv )
      comboBox.selectChange( level + 1 ,nextSelectObj);
},
   
    createOptions : function( code, sel){
    var datas = code == "0" ? cat.getlevel(1) : cat.getsub( code );
    for(var item in datas)
    {
      if(item != ‘len’)
      {
        var op = document.createElement("option");
        op.text = datas[item].name;
        op.value = item;
        if(server_code && item == server_code.substr(0,item.length)){
          op.selected = ‘true’;
        }
        sel.options.add( op );
      }
    }
    },
   
    hide : function(level){
    for(var i = this.sels.length; i > level; i–){
        if(this.sels[i])
         this.sels[i].style.display = "none";
    }
    }
}
comboBox.init();
</script>

Read: 954

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注