jquery 列表选择控件 select option list

最新推荐文章于 2024-09-26 13:58:48 发布

原创最新推荐文章于 2024-09-26 13:58:48 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个使用HTML和JavaScript实现元素交互的示例，包括元素的选中、折叠等功能，通过简单的用户界面展示了如何利用JavaScript操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<script type="text/javascript" src="http://zuo.ai.xiao.blog.163.com/blog/jquery.js"></script>
<script language="javascript">
(function($){
$.fn.extend({
       bgchange:function(p){//选中
          var $pa = p ? $(this).parent() : $(this);
          if($pa.hasClass("bgc")){
             $pa.removeClass("bgc");
          }else{
               $pa.addClass("bgc");
          }
       },
       fold:function(){//折叠
              var t = $(this).text();
           var $d = $(this).parent().nextAll();
           if(t == "-"){//展开操作
               $d.hide();
               $(this).text("+");
           }else{//折叠操作
               $d.show();
               $(this).text("-");
           }
       }
})
//===============移动==============
   $.zSelect = {
       init:function(t){//初始化
          if(t == "-"){
             $(".pf").text("-");
             $("dd").show();
          }else{
             $(".pf").text("+");
             $("dd").hide();
          }
       },
       moveOpt:function(f,t){//f 来 t去
             var $f = $(f).find(".bgc");
             var fv = "";
             var fpid = "";
             var $td = new Object;//
             var $fp = new Object;//来源的父级元素
             var $fc = new Object;//来源的子元素
             var fti = "#d_";
          $.each($f,function(k, v){
             fpid = $(v).attr("pid");
             if(fpid){
                 $fc = $(f).find('dd[pid="'+fpid+'"]');
                 $fp = $(f).find(fti+fpid);
                 $td = $(t).find(fti+fpid);
                  if($fc.length <= 1){ $fp.remove();}
                  if($td.length > 0){//父级存在
                     $td.after(v);
                  }else{//创建父级
                    $fp = $fc.length > 1 ? $fp.clone() : $fp;
                    $("<dl>").append($fp).append(v).appendTo($(t));
                  }
             }else{//父级元素
                $td = $(t).find(fti+$(v).attr("value"));
                $fc = $(v).parent();
                if($td.length > 0){//替换
                    $td.after($fc.children("dd"));
                      $td.replaceWith(v);
                 }else{
                     $fc.appendTo($(t));
                 }
             }
          })
          return false;
       }
   }
})(jQuery)

jQuery(function(){
//初始化
$.zSelect.init("+");
//删除
$("#tol").click(function(){$.zSelect.moveOpt("#ropt","#lopt")});
//添加
$("#tor").click(function(){$.zSelect.moveOpt("#lopt","#ropt")});
   //折叠
$(".pf").die().live("click",function(){$(this).fold()})
   //子集选中
$("dd").click(function(){$(this).bgchange()});
//父级选中
$(".pt").die().live("click",function(){$(this).bgchange(1)});
})

</script>

<style type="text/css">
.listitem{height:8em;font-size:0.8em; position:relative;top:100px;left:100px;}
.listitem .lists{width:10em; height:8em;overflow:auto; border:#666666 1px solid; float:left}
.listitem .btn{float:left;padding:2em;}
.listitem a{text-decoration:none;color:#000000}
.lists dl,dt,dd{margin:0}
.lists .pt{display:inline-block;width:7em}
.lists .pf{display:inline-block;border:#999999 1px solid;font-size:0.7em;color:#999999;padding:0 0.3em}
.bgc{background:#6699FF}
</style>
<body>

<div class="listitem">
    
   <div id="lopt" class="lists">
       <dl>
           <dt id="d_1" value="1" pid="">
               <a class="pf" href="http://zuo.ai.xiao.blog.163.com/blog/##">-</a><label class="pt">北京</label>
           </dt>
           <dd id="d_7" value="7" pid="1">——朝阳</dd>
           <dd id="d_3" value="3" pid="1">——海淀</dd>
           <dd id="d_4" value="4" pid="1">——丰台</dd>
       </dl>
       <dl>
           <dt id="d_2" value="2" pid="">
               <a class="pf" href="http://zuo.ai.xiao.blog.163.com/blog/##">-</a><label class="pt">河北</label>
           </dt>
           <dd id="d_5" value="5" pid="2">——保定</dd>
           <dd id="d_6" value="6" pid="2">——沧州</dd>
           <dd id="d_8" value="8" pid="2">——涿州</dd>
       </dl>
   </div>
   
   <div class="btn">
       <input type="button" value=">>" id="tor" /><br/><br/>
       <input type="button" value="<<" id="tol" />
   </div>
   
   <div id="ropt" class="lists">

   </div>
</div>

</body>
</html>