精华内容
下载资源
问答
  • JSP 下拉列表框、多行下拉列表框

    千次阅读 2014-07-25 17:24:15
    1、下拉列表框:  语法:

    1、下拉列表框:

          语法:

         <select name="名称">

              <option value="值" selected>显示值</option>

              ............

        </select>

    2、多行下拉列表框

          语法;

          <select name="名称" size="行数" multiple>

         ......

         </select>

    展开全文
  • DOM为列表框下拉菜单添加选项 创建选项除了使用前面所示的createElement方法之外,还可以使用专门的构造器来构造一个选项出来。 new Option( text ,value , defaultSelected ,selected) 该构造器有4个参数,说明...

    DOM为列表框、下拉菜单添加选项

    创建选项除了使用前面所示的createElement方法之外,还可以使用专门的构造器来构造一个选项出来。

    new Option( text ,value , defaultSelected ,selected)

    该构造器有4个参数,说明如下;


    提示并不需要都指明四个参数,指明一个或者两个都可以,假如一个的话知名的是text,两个的话就是text value。





    <html>
    	<head>
    		<title>00</title>
    		
    	</head>
    	<body id="test">
    	
    		<input type="button" value="创建一个城市列表框" οnclick="test()"/>
    		<input type="button" value="一条条删除列表框的每一项" οnclick="testdelete()"/>
    		<input type="button" value="一次性清空列表项" οnclick="testdeleteAll()"/>
    	
    	</body>
    	
    	<script type="text/javascript" charset="utf-8">
    		
    			function test(){
    				var element=document.createElement("select");
    				for(var i=0;i<10;i++){//注意,变量的定义只能用var
    					var options=new Option("列表项"+i,i);
    					element.options[i]=options;
    				}
    				element.id="myselect";
    				element.size=5;
    				document.getElementById("test").appendChild(element);
    			}
    			
    			function testdelete(){
    				var myselect=document.getElementById("myselect");
    				var element=myselect.options;
    				if(element.length>0){
    					myselect.remove(element.length-1);
    				}
    			}
    			
    			function testdeleteAll(){
    				var myselect=document.getElementById("myselect");
    				if(myselect.options.length>0){
    					myselect.options.length=0;
    				}
    			}
    		
    		</script>
    
    </html>



    展开全文
  • ,但是很不幸运,在下拉列表框(<select>)中,<label>并不能通过指向来展开选项,所以只能通过自定义的方式模拟一个下拉列表框的功能。 上效果图: 源码如下: <!-- author:helang Email:...

    在上一篇《单选框/复选框美化》中,使用到了关键先生 <label>,但是很不幸运,在下拉列表框(<select>)中,<label>并不能通过指向来展开选项,所以只能通过 自定义的方式 模拟一个下拉列表框的功能。

    上效果图:

    源码如下:

    <!--
        author:helang
        Email:helang.love@qq.com
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="author" content="helang.love@qq.com">
        <title>jQuery之美——自定义下拉列表框</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                background-color: #ffffff;
                font-size: 14px;
                font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
                letter-spacing: 0;
                color: #333333;
            }
            .select_box{
                padding: 0 10px;
                position: relative;
                height: 40px;
                line-height: 40px;
                border: #999999 solid 1px;
                color: #666666;
                user-select: none;
                font-size: 16px;
    
            }
            .select_box:after{
                content: '';
                display: block;
                width:0;
                height:0;
                border-right:6px solid transparent;
                border-left:6px solid transparent;
                border-top:6px solid #999999;
                position: absolute;
                right: 10px;
                top: 17px;
            }
            .select_box>ul{
                margin: 0;
                padding: 0;
                list-style: none;
                position: absolute;
                width: 100%;
                height: auto;
                border: #999999 solid 1px;
                left: -1px;
                top: 40px;
                display: none;
                background-color: #ffffff;
                z-index: 1;
                font-size: 14px;
            }
            .select_box>ul>li{
                margin: 0;
                line-height: 32px;
                border-top: #999999 solid 1px;
                padding: 0 15px;
            }
            .select_box>ul>li:first-child{
                border-top: none;
            }
            .select_box>ul>li:hover{
                background-color: #999999;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
    <h1 style="text-align: center;">jQuery之美——自定义下拉列表框</h1>
    <div style="width: 400px; margin: 50px auto;">
        <div class="select_box" id="stlect_1">
            <div>请选择</div>
        </div>
    </div>
    <h5 style="text-align: center;">helang.love@qq.com</h5>
    <script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        /* jQuery对象级别插件扩展 */
        $.fn.extend({
            hlSelect:function (data) {
                var _self={};
                _self.el=$(this);
                _self.data=data || [];
                _self.setList=function(){
                    var htmlStr='<ul>';
                    $.each(_self.data,function (index,item) {
                        htmlStr+='<li>'+item+'</li>';
                    });
                    htmlStr+='</ul>';
                    _self.el.append(htmlStr);
                };
                _self.setList();
    
                _self.ListEl = $(this).children("ul");
                _self.el.click(function () {
                    if(_self.ListEl.is(':hidden')){
                        _self.ListEl.show();
                    }else {
                        _self.ListEl.hide();
                    }
                });
                _self.ListEl.on("click",">li",function () {
                    _self.el.children("div").html($(this).html());
                });
            }
        });
    
        $("#stlect_1").hlSelect(['web-7258','WEB前端梦之蓝','helang.love@qq.com','jQuery之美']);
    </script>
    </body>
    </html>

    源码部分只是模拟一个下拉列表框的功能,在功能的完整上还有一大步距离。

    作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com

    微信公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。

    更多精彩文章,请扫下方二维码关注我的公众号

     

    展开全文
  • Axure表单元件:下拉列表框与列表框

    千次阅读 2019-12-23 14:43:20
    下拉列表框 1,拖动“下拉列表框”元件至页面中; 2,双击下拉列表框,打开“编辑列表选项” 3,点击“+”增加列,输入内容;单击选择框,可以设为默认选中,没有勾选默认为第一个。 注:点击“添加多个”,可以...

    下拉列表框

    1,拖动“下拉列表框”元件至页面中;
    在这里插入图片描述
    2,双击下拉列表框,打开“编辑列表选项”
    在这里插入图片描述
    3,点击“+”增加列,输入内容;单击选择框,可以设为默认选中,没有勾选默认为第一个。
    在这里插入图片描述
    注:点击“添加多个”,可以一次性填多条值。

    列表框

    操作与下拉列表框类似。区别只是在“编辑列表选项”对话框中,可以选择多个;最最根本区别是展示效果,列表框是平铺展示所有内容;下拉列表框只显示一列当前列内容
    在这里插入图片描述

    展开全文
  • Android自定义的下拉列表框控件

    万次阅读 2017-10-20 13:49:40
    Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求, 比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的: 这个时候只有自己动手...
  • HTML 下拉列表框

    千次阅读 2019-04-28 16:30:23
    HTML 下拉列表框
  • 可选择输入的下拉列表框示例

    千次阅读 2018-10-05 12:11:33
    &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type"...可选择输入的下拉列表框&lt;/title&gt; &lt;style type="text/css"&gt; div,sp
  • 具有多选功能的下拉列表框

    热门讨论 2012-07-26 11:49:00
    实现了一个可以多选的下拉列表框,下拉列表是一个checkboxlist,通过用户控件实现
  • vue表单绑定:多选框和下拉列表

    千次阅读 2017-08-11 18:06:10
    在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现:<label>测试多选渲染:</label> <div> <template v-for="item in chks">...
  • android的下拉列表框

    千次阅读 2012-12-02 20:03:20
    这次的话就使用这个下拉列表框做一个城市区域联动的小例子,数据的话简单起见就弄成静态的。就不先扯淡了。 1.先来看下下拉列表框的标签 android:id="@+id/city" android:prompt="@string/city_label" an
  • 下拉列表框下拉列表框是指允许网页浏览者从下拉式菜单中选择某一项,我们通常会在网页中看到各种下拉列表框,这是一种最节省空间的方式。正常情况下,浏览者只能看见一个选项,单击选项按钮打开菜单后才能看到...
  • C# 下拉列表框

    万次阅读 2017-02-09 21:47:54
    下拉列表框 ComboBox既是下拉列表 属性: Items属性:为下拉列表添加相应的项目,与列表框类似 DropDownStyle属性:控制组合框的外观功能(此属性如果选择DropDownList则只可选择而不能再框中输入,若选择...
  • 1.原因:最近项目中有很多要用到combobox,但是如果这些数据是加载时获取,而且这些数据是从另一个模块手动添加的话,那么一开始加载这个页面,当点击这个下拉列表框(combobox),如:所属队伍时,它里面是没值可选的...
  • JavaSwing_2.9: JComboBox(下拉列表框

    万次阅读 多人点赞 2017-07-09 00:11:45
    JComboBox,下拉列表框。JComboBox以下列列表的形式展示多个选项,用户可以从下拉列表中选择一个值。
  • flex复选框和下拉列表

    千次阅读 2013-07-06 21:43:26
    这几天接触了flex的很多控件,让我印象最深刻的就是控件的数据绑定几乎所有控件都可以这样做,基本上来说原理html一样,我自己闲暇时间就整理了有关复选下拉的几种用法,下面就给大家分享一下。 1.复选 这里...
  • Android自定义下拉列表框控件源码

    热门讨论 2015-04-14 15:18:03
    基于android 4.4 开发的 自定义android 下拉列表框控件 源码,有需要的欢迎下载哈
  • 嵌套下拉列表框

    千次阅读 2013-09-03 22:26:47
     //下拉列表框的内容  private Spinner area = null; //二级列表  private String[][] areaData = new String[][]{  {"海城区","银海区","铁山港区"},  {"秀峰区","七星高新区","叠彩区","象山区...
  • 前端 自定义下拉列表框

    千次阅读 2017-08-27 21:31:20
    今天在公司里,遇到了一个很简单的问题,有一个UI样式固定的下拉列表框。当我拿到这个ui的时候,第一感觉就是简单的select标签就可以解决问题,但是后面在改样式的过程中,遇到了许许多多的问题,包括无法修改选中后...
  • sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。 该jQuery...
  • 这段代码是通过JavaScript来控制下拉列表的高度 <select size=1 id="jia" onmouseover="jxq(1);" onmouseout="jxq(2);"> <br /><option>1111</option><br /><option>2222</option><br /><option>...
  • MFC 下拉列表框的设置

    千次阅读 2019-11-06 10:33:27
    MFC: MFC(Microsoft Foundation Classes),是一个微软公司提供的类库(class ...包含的类包含大量Windows句柄封装类很多Windows的内建控件组件的封装类。MFC是WinAPI与C++的结合。API,即微软提供的Windows下...
  • form表单的下拉菜单和列表框

    千次阅读 2019-09-25 01:04:46
    还是以前一样,先上效果图: 这个下拉菜单的生成需要一个重要的子标签,那就是select,代码如下: 下面是简易下拉菜单:<br> <select id="skills" name="skills"> <option value="java"&...
  • 下拉列表框和滚动条

    千次阅读 2017-10-29 15:07:51
    package hello; import java.awt.*; import javax.swing.*; public class Hello extends JFrame { JPanel mb1,mb2; JLabel bq1,bq2; JComboBox xlk;... //列表,若没有JScrollPane,则窗口不会滚动
  • 小程序下拉列表框菜单

    万次阅读 2018-12-10 14:27:11
    小程序下拉列表框菜单 &lt;view class='top'&gt; &lt;view class='top-text'&gt; 选择班别&lt;/view&gt; &lt;!-- 下拉框 --&gt; &lt;view class='top-selected' bindtap='...
  • 级联下拉列表框

    千次阅读 2015-12-09 21:43:38
    还是老规矩,先来看下...这就省份等常见的级联下拉列表框的原型;下面来看看代码的构成 标题 body{ font-size: 13px; } .clsInit{ width: 435px; height: 35px; line-height:
  • 如何实现两个下拉列表框的联动(选中一个可以在数据库中查询然后显示第二个,而且第二个是可选可编辑的)
  • JAVA下拉列表框组件

    千次阅读 2019-09-23 20:09:50
    Swing中的下拉列表框使用JComboBox类对象来表示,它是javax.swing.JComponent类的子类。 它的常用构造方法如下: public JComboBox(). public JComboBox(ComboBoxModel dataModel). public JComboBox(Object[]...
  • 安卓实现下拉列表框 【Spinner】

    千次阅读 2019-10-06 15:20:09
    下拉列表框 引言: 别人写的东西往往不能全信,照着写出bug很正常,有些东西看来还是要自己摸索啊。下拉列表,要用到Spinner控件。 步骤一: 你需要在布局中声明这个控件。 <Spinner android:entries="@array/...
  • 怎样从数据库调用数据到下拉列表框 实现选择功能 另加第一行显示“--请选择--”
  • 自绘下拉列表框

    2013-12-03 10:07:39
     下拉列表框,又称组合列表框,他是一个较为复杂的控件。它有三种状态,simple、drop down、drop list。由三个控件组成,编辑框、下拉按钮、listbox。所以,要实现下拉列表框的综合自绘,其工作量是蛮大的。而且,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 135,205
精华内容 54,082
关键字:

列表框和下拉列表框区别