精华内容
下载资源
问答
  • 前端下拉选择框
    2020-09-03 18:20:17

     

    动态获取数据库字段==>添加到前端下拉选择框==>获取选中值==>填入input

     

    HTML:

          <div class="form-group">
                <label class="col-sm-4 control-label">地址:</label>
                <div class="col-sm-4">
                    <div class="input-group"><!--保持内联,消除边框,类似于form-inline-->
                        <input type="text" class="form-control" name="houseCode" id="houseCode" readonly="true" required>
    
                        <div class="input-group-btn"><!--不换行,与相邻元素内联,包含dropdown-->
                            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                                 onclick="getHouseCode()"   aria-expanded="false">
                                请选择<span class="caret"></span>
                            </button>
                            <ul id="houseCodeList" class="dropdown-menu">
                              //遍历的<li>显示位置
    
    
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

    JS:

     $("#houseCodeList").on("click", "li", function () {
            $("#houseCode").val($(this).text());  //获取选中<li>的内容并填入对应input
           
            StationNo = $(this).children("a").attr("id");  //获取选中<li>下<a>标签的ID
    
            text = $(this).children("a").attr("code") //获取选中<li>下<a>标签的code
            console.log(text);
            $("#address").val($(this).children("a").attr("code"));获取选中<li>下<a>标签的code并填入对应input
    
        });

     

        /* getHouseCode */
        function getHouseCode() {
    
            $.ajax({
                url: url,
                type: "GET",
                withCredentials :true,
                success: function (date2) {
    
                    var date = eval(date2.result);  //获取结果集
                    for (var j = 0; j < date.length; j++) {
                        $("#cc").remove();  //清除之前生产的旧<li>
                    }
                    for (var i = 0; i < date.length; i++) {
                        var html = "";
                        html = "<li id='cc'><a href=\"#\"     code='" + date[i].address + "'          id='" + date[i].stationNo + "'>" + date[i].stationName + "</a></li>";
    
                        $("#houseCodeList").append(html); //<拼接>
                    }
                }
    
            });
    
        }
    下面为给<li>下<a>标签添加函数,可遍历添加
     $("#houseCodeList  li a").attr("onclick", "getTypeList(this.id)");

     

    更多相关内容
  • 前端 自定义下拉列表框

    万次阅读 2017-08-27 21:31:20
    今天在公司里,遇到了一个很简单的问题,有一个UI样式固定的下拉列表框。当我拿到这个ui的时候,第一感觉就是简单的select标签就可以解决问题,但是后面在改样式的过程中,遇到了许许多多的问题,包括无法修改选中后...

    今天在公司里,遇到了一个很简单的问题,有一个UI样式固定的下拉列表框。当我拿到这个ui的时候,第一感觉就是简单的select标签就可以解决问题,但是后面在改样式的过程中,遇到了许许多多的问题,包括无法修改选中后默认的蓝色框,option的hover无法改变等等。。。

    在许多次尝试失败后,我决定,定义一个属于自己的下拉列表,当然啦,我并不想用那些组件,虽然用组件很快吧,但是当一个项目中用的组件多了以后,总是会出现好多不可控的因素,相信在座的大牛都比我懂的多,那就开始这次体验吧~~

    效果图:

    嗯。。学了半天gif图还是不会,等小编以后再补上图,后面有源码,大家直接复制即可。。
    

    理一下思路:

    • 通过ul li 俩标签的形式来定义这个列表 显然li中一开始是隐藏的
    • li 标签下的就是我们的标签
    • ul 标签下我会定义一个div 用来装”请选择一个标签” 之类的默认选项
    • 在div 中分为两块 span 和 img
    • span 就是文字”请选择一个标签”
    • img 则是向下向上的图标
    • 点击后,图标会变 span会变 div的边框会变 当然你也可以随意为li(你的标签)添加一些hover样式

    因为公司项目中有jquery,所以有部分jquery的代码,当然你想用js原生实现也可以哦
    好了,就那么简单,让我们来写一次自己的组件吧


    html代码

    <ul class="dropdown" tabindex="1">
            <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
            <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
                <span>请选择标签</span>
                <div class="dp-img">
                    <img src="images/dp-down.png" width="15" height="20">
                </div>
            </div>
    
            <li class="dp-list hide">标签一</li>
            <li class="dp-list hide">标签二</li>
            <li class="dp-list hide">标签三</li>
            <li class="dp-list hide">标签四</li>
    </ul>
    

    简单分析下上述代码,ul,li 结构 下面分为一个<div>和若干个<li>标签。
    <div class="dp-select">下有一个<span>用来装默认标签文字,还有一个<div class="dp-img">用来放最右边那个向上和向下的小图标。
    <li>就是各位一个个的标签啦,我给它定义了一个‘dp-list’的样式
    html就只有那么多了,接下来让我们看看css

    css代码

    <style>
        .dropdown{
            width: 150px;
            height: 30px;
            line-height: 30px;
            padding:0px;
            cursor: pointer;
            outline: 0;
            border:1px solid #8a8a8a;
        }
        .dropdown .dp-list{
            list-style: none;
            width: 150px;
            height: 30px;
            line-height: 30px;
            border-left: 1px solid #8a8a8a;
            border-right: 1px solid #8a8a8a;
            border-bottom: 1px solid #8a8a8a;
            position: relative;
            left: -1px;
    
        }
        .dropdown .dp-list:hover{
            background: #8a8a8a;
            color: #ffffff;
        }
        .dropdown .dp-img{
            float: right;
            width: 20px;
            height: 30px;
            display: flex;
            justify-content:center;
            align-items:center;
            border-left: 1px solid #8a8a8a;
        }
        .hide {
            display: none;
        }
    </style>
    

    css属实没啥好说的,dp-img 也就是我放图标的那个小div,我这里采用的是flex布局,让图标居中。
    当然,如果你们想用background使图标居中也没问题啦,个人习惯而已~
    hide是我定义的一个隐藏li标签的样式,为了让js代码写的少一些。如果不想写,在js中改成display:none 就可以咯

    js代码

    <script type="text/javascript">
        $('.dropdown .dp-select').on('click',function(){
            if($('.dropdown li').hasClass('hide')){
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-up.png');
                //显示li标签
                $('.dropdown li').removeClass('hide');
                //加点点击样式
                $('.dropdown').css('border','1px solid lightblue');
                $('.dropdown .dp-img').css('border-left','1px solid lightblue');
            }else{
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-down.png');
                //显示li标签
                $('.dropdown li').addClass('hide');
                //继续点击样式
                $('.dropdown').css('border','1px solid #8a8a8a');
                $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
            }
        });
        //点击li 标签后发生的事件
        $('.dropdown li').on('click',function(){
            var text = $(this).text();
            console.log(text);
            $('.dp-select span').text(text);
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    
        });
        //失去焦点发生的事件
        $('.dropdown').blur(function(){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        });
    </script>
    
    

    终于看到js了,其实可以发现js代码并不多,好吧,我承认,我写的还是比较冗余的。
    如果精简下的话可能会更少哦!

    pass:这里我用jquery的,不喜欢用jquery的话,可以自己去把其中一些方法替换成js原生~

    第一个方法,为dp-select元素添加了click事件。
    解释下,就是你点默认的那个框的时候,下面的li标签会显示,图标img(就是一开始是向上的图标)你点了以后,就会换成向下的图标。
    jquery.css是我自己加的一些样式,大家可以自己修改。

    第二个方法,给li标签的点击事件,很简单,点击以后替换span中的text值,其他跟上面方法一样,换图标,换样式。。

    第三个方法,这是感觉最有意思的一个方法了,给div添加blur方法。
    因为我们都知道,一个下拉列表框,你在不属于它的地方点击后,应该会缩回去吧。
    为了实现这个效果,我采用给最大的ul标签添加tabindex=“1”
    这样ul标签就可以跟input框一样,使用
    blur,focus`等等方法了。
    失去焦点后,自然是隐藏li 修改样式,修改图标。

    差不多介绍完啦,第一次写博客,很菜。大家在实践过程中会发现ul标签是不是显得没有那么必要?
    当然每一个自己写的小东西需要不停地去优化,以前我用过无数组件,但是自己写一个很小很小的组件的时候,也会发现好多的问题。需要与大家共勉。

    对于以上写的下拉列表,接下来需要考虑的就是封装了。

    如果可以这样子调用我们的自己定义的下拉列表框,会不会很酷?

    <ul class="dp-default my-dark">
            请选择标签
            <li class="dp-list">标签一</li>
            <li class="dp-list">标签二</li>
            <li class="dp-list">标签三</li>
            <li class="dp-list">标签四</li>
    </ul>

    小结

    这样子,感觉像自己创建一个组件一样。下一篇会详细讲讲如何将自己写出来的小东西,再更加进一步的封装,其中还包括对html元素进行封装等等。

    就到这里吧,附上源码。希望能有更多的机会跟大家交流~

    源码

    注意:有俩个图标在 大家可以直接另存为这两张图
    Jquery的话。。自己在网上找一个jquery.js就好了!
    images/dp-down.pngimages/dp-up.png

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <!--  img  #8a8a8a -->
        <style>
            .dropdown{
                width: 150px;
                height: 30px;
                line-height: 30px;
                padding:0px;
                cursor: pointer;
                outline: 0;
                border:1px solid #8a8a8a;
            }
            .dropdown .dp-list{
                list-style: none;
                width: 150px;
                height: 30px;
                line-height: 30px;
                border-left: 1px solid #8a8a8a;
                border-right: 1px solid #8a8a8a;
                border-bottom: 1px solid #8a8a8a;
                position: relative;
                left: -1px;
    
            }
            .dropdown .dp-list:hover{
                background: #8a8a8a;
                color: #ffffff;
            }
            .dropdown .dp-img{
                float: right;
                width: 20px;
                height: 30px;
                display: flex;
                justify-content:center;
                align-items:center;
                border-left: 1px solid #8a8a8a;
            }
            .hide {
                display: none;
            }
        </style>
    
    </head>
    <body>
        <ul class="dropdown" tabindex="1">
            <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
            <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
                <span>请选择标签</span>
                <div class="dp-img">
                    <img src="images/dp-down.png" width="15" height="20">
                </div>
            </div>
    
            <li class="dp-list hide">标签一</li>
            <li class="dp-list hide">标签二</li>
            <li class="dp-list hide">标签三</li>
            <li class="dp-list hide">标签四</li>
        </ul>
    
    
        <ul class="dp-default my-dark">
            请选择标签
            <li class="dp-list">标签一</li>
            <li class="dp-list">标签二</li>
            <li class="dp-list">标签三</li>
            <li class="dp-list">标签四</li>
        </ul>
    </body>     
    </html>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    
    <script type="text/javascript">
        $('.dropdown .dp-select').on('click',function(){
            if($('.dropdown li').hasClass('hide')){
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-up.png');
                //显示li标签
                $('.dropdown li').removeClass('hide');
                //加点点击样式
                $('.dropdown').css('border','1px solid lightblue');
                $('.dropdown .dp-img').css('border-left','1px solid lightblue');
            }else{
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-down.png');
                //显示li标签
                $('.dropdown li').addClass('hide');
                //继续点击样式
                $('.dropdown').css('border','1px solid #8a8a8a');
                $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
            }
        });
        失去焦点发生的事件
        $('.dropdown').blur(function(){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        });
        点击li 标签后发生的事件
        $('.dropdown li').on('click',function(){
            var text = $(this).text();
            console.log(text);
            $('.dp-select span').text(text);
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    
        });
    </script>
    展开全文
  • 主要介绍了django前端页面下拉选择框默认值设置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下拉选项的实现以及文本框的实现,以及要实现这2个功能的所需标签的介绍

    标签介绍

    form标签:用于表单类型的标签。
    select标签:一般和form标签连用,实现下拉框作用。
    option标签:一般要嵌套在select标签里面,用于实现选项。
    textarea标签:用来实现文本框的标签。

    select标签的属性:

    前面提到了select标签要写在form表单里面,而select标签里面要嵌套option标签用来实现选项。
    multiple属性:写入这个属性时选项框不折叠起来,如下代码及运行:

    <form>
    	<select multiple="multiple">
    			<option></option>
    			<option>奥特曼</option>
    			<option>奥特曼1</option>
    			<option>奥特曼2</option>
    	</select>
    </form>
    

    在这里插入图片描述

    如果不写multiple这个属性则默认折叠,运行结果如下:

    <form>
    	<select>
    			<option></option>
    			<option>奥特曼</option>
    			<option>奥特曼1</option>
    			<option>奥特曼2</option>
    	</select>
    </form>
    

    在这里插入图片描述

    textare标签的属性

    1,cors属性:表示文本框的列数。
    2,rows属性:表示文本框的行数。
    可以自行修改参数,并且这个文本框可以手动拉大拉小。
    写法如下:

    <form>
    		<textarea cols="5" rows="5">
    			这是文本框
    		</textarea>
    </form>
    

    在这里插入图片描述

    注意和form标签连用。

    你学费了吗

    展开全文
  • Angular 前端下拉选择框

    千次阅读 2019-03-10 21:55:57
    nzPlaceHolder="请选择年级" nzShowSearch> *ngFor="let option of gradeListOfOption" [nzLabel]="option.name" [nzValue]="option.code"> ts: searchGradeList() { this.gradeListOfOption = [{ ...

    html:

    <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="gradeNo">年级</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                  <nz-select (click)="searchGradeList()" [(ngModel)]="grade" formControlName="gradeNo" id="gradeNo" [nzSize]="size"
                    nzPlaceHolder="请选择年级" nzShowSearch>
                    <nz-option *ngFor="let option of gradeListOfOption" [nzLabel]="option.name" [nzValue]="option.code"></nz-option>
                  </nz-select>
                </nz-form-control>
    </nz-form-item>
    

    ts:

    searchGradeList() {
        this.gradeListOfOption = [{ name: '大一', code: '1' },
        { name: '大二', code: '2' },
        { name: '大三', code: '3' },
        { name: '大四', code: '4' }];
      }
    

    显示结果:
    在这里插入图片描述

    展开全文
  • 在实际项目开发中经常会遇到前端下拉列表和后端交互的方式,这样的有两种实现解决方案。第一种是前后端约定好,前端写死,不好的地方就是发生变动,前后端都要重新发版上线,耦合性太高;还有一种就是全权委托给后端...
  • select控件可以创建选择框。可为用户提供一组选项,允许用户从中选取,通常呈现为下拉菜单的样式。 select控件的基本结构 下拉列表选择区是由<select>标签和<option>标签构成,其中<select>标签...
  • 主要介绍了uniapp 仿微信的右边下拉选择弹出的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧,省...
  • 树形下拉选择框

    2021-11-04 17:35:39
    el-select size="small" placeholder="请选择" clearable v-model="selectLabel" @clear="selectClear"> <el-option class="option-style" :label="selectLabel" :value="selectValue">
  • 本文为工作中经常使用到的el-select下拉选框的使用,请根据自己的情况适当修改,即可使用。
  • 实现:通过在前端HTML页面的...内嵌select选择框,千万要注意不能都是lable标签,否则将会返回None值,不能达到目的 <form action="result.html" method="post" name="tasksubmit"> {% csrf_token %} &l
  • 前端设置下拉框与选择

    千次阅读 2021-05-24 12:02:29
    后台返回json格式,前端设置下拉框或者选择 <el-form-item v-for="item in selectsOption" :key="item.prop" :label="item.label" :prop="item.prop" > <multiple-select v-model="formModel[item...
  • 前端代码下拉选择框显示年月日

    万次阅读 2018-01-31 14:10:11
    &lt;body&gt; &lt;form name="date"&gt; &lt;select name="year" onchange="selectYear(this.value)"...选择 年&lt;/option&gt; &lt;/select&gt;
  • 前端实现—下拉菜单

    万次阅读 多人点赞 2021-11-14 09:32:34
    实现效果: ... 下拉菜单 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style> li { width
  • 实现一个在编辑input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单: 将匹配的内容放在一个div中,input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题: input的onblur中隐藏...
  • //添加一项option $("#select_id").prepend("请选择");//在前面插入一项option $("#select_idoption:last").remove();//删除索引值最大的Option $("#select_idoption[index='0']").remove();//删除索引值为0的Option...
  • countrypicker.js是一款jquery选择国家下拉列表框插件。countrypicker.js带有搜索功能和显示国旗功能。通过简单的设置,既可以生成带既定国家的下拉列表框。使用方法在页面中引入jquery和bootstrap相关文件,以及...
  • 效果: Document 接单区域: 选择机构 选择机构1 选择机构2 选择机构3 选择区域
  • 本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下:一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下,把代码简化一下...
  • "> <option value="" selected>-----请选择-----</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> 地 区:</td> <td><select name="qu" id="select3"> <option value="" selected>-----请选择-----</option> ...
  • 如何获取下拉列表框的值

    千次阅读 2021-06-11 17:33:51
    分别使用javascript原生的方法和jquery方法text1text2code:一:javascript原生的方法1:拿到select对象: var myselect=document.getElementById("test");2:拿到选中项的索引:var index=myselect.selectedIndex ;...
  • 效果如下 贴代码 (死数据) 下拉选择 上海 北京 广州 深圳 贴代码(活数据) 下拉选择
  • 今天遇到一个贼蛋碎的问题: 1、我从 一个下拉列表select中单击事件,获取options的value值 代码如下: var product_id = $(this).val() console.log出来是发现是个数组,如:[“51”] 然后做了如下判断 代码如下: ...
  • html下拉单选

    2022-04-21 19:36:43
    <!doctype html> <html lang="en"> <head> ...meta charset="UTF-8">... content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">...
  • 今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用...
  • Layui实现搜索实时下拉选择框

    千次阅读 2022-06-07 14:49:49
    layui+JQuery实现搜索下拉 按下enter发送异步请求下拉框的数据,将返回的数据挂载在下拉选项中提供选择html结构 layui下载地址
  • jQuery 自定义下拉列表框

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,039
精华内容 12,415
关键字:

前端下拉选择框

友情链接: unusual_jumpshot.rar