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="width: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":"武汉"   
  }
]

 

posted on 2018-12-04 10:22  LoaderMan  阅读(596)  评论(0)  编辑  收藏  举报

导航