`

combo--2

 
阅读更多



 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>1.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!-- easyui的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/default/easyui.css">
    <!-- 小图标的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/icon.css">
   
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
 
 <script type="text/javascript">
  $(function(){
   $('#cc').combo({
    width:170,
    required:true,
    editable:false,
    panelWidth:170,
    panelHeight:300,
    value : '1',
    onChange: function(newValue, oldValue){
     alert("newValue="+newValue+",oldValue="+oldValue);
    },
    validType:'email'
   });
   
   //让输入框获取焦点
   $('#cc').combo('textbox').focus();
   
   $('#sp').appendTo($('#cc').combo('panel'));
   $('#sp img').click(function(){
    var v = $(this).attr("v");
    var s = $(this).attr("t");
    $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
   });
  });
  
  var showPal = function(){
   $('#cc').combo('showPanel');
  
  }
 </script>
 
  </head>
   
  <body> 
   <select id="cc" style="width:150px"></select>
 <div id="sp">
  <div style="color:#99BBE8;background:#fafafa;padding:5px;">请选择一个图片</div>
  <div style="padding:10px">
   <img src="../style/images/dogs/puppy_dogs_01.png" v="1" t="1图片"><br/>
   <img src="../style/images/dogs/puppy_dogs_02.png" v="2" t="2图片"><br/>
   <img src="../style/images/dogs/puppy_dogs_03.png" v="3" t="3图片"><br/>
   <img src="../style/images/dogs/puppy_dogs_04.png" v="4" t="4图片"><br/>
   <img src="../style/images/dogs/puppy_dogs_05.png" v="5" t="5图片"><br/>
   <img src="../style/images/dogs/puppy_dogs_06.png" v="6" t="6图片"><br/>
   <img src="../style/images/dogs/puppy_dogs_07.png" v="7" t="7图片"><br/>
  </div>
 </div>
 <button onclick="showPal();">显示下拉列表</button>
 <button onclick="$('#cc').combo('clear');">清空下拉列表</button> 
  </body>
</html>

  • 大小: 39.3 KB
分享到：
| combo--1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics