推荐一个优秀的级联下拉框js库

推荐一个优秀的级联下拉框js库

 

 

 

http://code.google.com/p/jquery-option-tree/

 

该级联下拉框使用简便，功能强大。而且是任意级联，只需构造一个json对象即可，非常易用，跨浏览器。

该级联下拉框任何时候都有一个值，也是设置在json对象里的。

 public function html($id=null, $select_name = 'leader3',$name1='',$name2='',$name3='',$value=0)
    {
        $nolimit = Interface_Const::str_choose;
        if (!$name1)
            $name1 = $nolimit;
        if (!$name2)
            $name2 = $nolimit;
        if (!$name3)
            $name3 = $nolimit;
            
        //$json = self::getjson();
        
        
        
        $json ='{"请选择":"0",
                 "某人1":"1",
                 "某人2":"2",
                   "地区1":{"请选择":"0",
                          "某人3":"3",
                          "某人4":"4",
                         "地区11":{"请选择":"0",
                                  "某人5":"5",
                                  "某人6":"6"
                                 },
                         "地区12":{"请选择":"0",
                                  "某人8":"8",
                                  "某人9":"9"
                                 }
                          },
                   "地区2":{"请选择":"0",
                          "某人10":"10",
                          "某人11":"11",
                         "地区21":{"请选择":"0",
                                  "某人12":"12",
                                  "某人13":"13"
                                 },
                         "地区22":{"请选择":"0",
                                  "某人14":"14",
                                  "某人15":"15"
                                 }
                          }
                }';
        
        $html = '
        <input type="text" id="'. $select_name .'" name="'. 
           $select_name .'" style="display:none;" />
        <input type="text" id="'. $select_name .'_v" name="'. 
           $select_name .'_v" style="display:none;" />   
        ';
        $html .="
<script type=\"text/javascript\">
$(function() {
  //定义一个函数
  var displayParents_{$select_name} = function() {
    var labels = []; // initialize array
    $(this).siblings('select') // find all select
                   .find(':selected') // and their current options
                     .each(function() { labels.push($(this).text()); });
    
    $('input[name={$select_name}_v]').val(this.value);
    $('input[name={$select_name}]').val(labels.join('/'));  // and display the labels
    
    alert($('input[name={$select_name}_v]').val());
    alert($('input[name={$select_name}]').val());
    
  };

  var option_tree_{$select_name} = {$json}; 
  $('input[name={$select_name}]').optionTree(option_tree_{$select_name},
    {empty_value: '',choose:'',preselect: {
    '{$select_name}': ['{$name1}','{$name2}','{$name3}','{$nolimit}']}}).change(
    displayParents_{$select_name});
  //文本框加默认值  
  $('input[name={$select_name}]').val('{$name1}/{$name2}/{$name3}');
  $('input[name={$select_name}_v]').val($value);
});
</script>
      
        ";   
        return $html;   
    }