• easyUI之ComboBox(下拉列表框)


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>ComboBox(下拉列表框)</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
          <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
        <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
      </head>
      <body>
        
        
        <!-- 
        城市:
        <select id="cityID" class="easyui-combobox" name="city" style="200px;">   
            <option>aitem1</option>   
            <option>bitem2</option>   
            <option>bitem3</option>   
            <option>citem4</option>   
            <option>citem5</option>   
            <option>citem4</option>   
            <option>ditem5</option>   
            <option>ditem4</option>   
            <option>ditem5</option>   
            <option>ditem4</option>   
            <option>ditem5</option>   
            <option>eitem4</option>   
            <option>eitem5</option>   
        </select>  
        -->    
        
        
        
        城市:
        <input id="cityID" name="city"/>  
        
        <script type="text/javascript">
            //url表示请求的路径
            //valueField表示传到服务器的值,看不见的
            //textField表示页面中显示的值,看得见
            $("#cityID").combobox({
                url : "../json/city.json",
                valueField :"id",    
                   textField : "name"   
            });
        </script>
        <script type="text/javascript">
            $(function(){
                //为下拉组合框设置值
                $("#cityID").combobox("setValue","长沙");
            });
        </script>
        
            
      </body>
    </html>
    [
      {    
        "id":1,    
        "name":"北京"   
      },
      {    
        "id":2,    
        "name":"上海"   
      },
      {    
        "id":3,    
        "name":"广州"   
      },
      {    
        "id":4,    
        "name":"深圳"
      },
      {    
        "id":5,    
        "name":"武汉"   
      }
    ]  
  • 相关阅读:
    移动端图片懒加载插件
    Animate.css 教程
    git使用图解
    React-Native学习指南
    react-native 环境配置及hello world
    修改文件后浏览器自动刷新解决方案
    react-native 布局基础
    MongoDB数据库安装及配置环境(windows10系统)
    MongoDb windows环境安装,附百度云链接
    常用的几类npm依赖包管理
  • 原文地址:https://www.cnblogs.com/loaderman/p/10062553.html
Copyright © 2020-2023  润新知