精华内容
下载资源
问答
  • html 下拉选择框左移右移的小练习

    千次阅读 2018-08-17 17:56:33
    DOCTYPE html> <html>  <head>  <meta charset="UTF-8">  <title></title>  </head>  <body&...

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!DOCTYPE html>
    <html>
        <head>
            <meta charset="{CHARSET}">
            <title>选择框</title>
        </head>
        <body>
            
            <select size="10" style = "width: 100px;background-color: greenyellow;" name = "select_left" id = "select_left" multiple="multiple" >
                <option name = "fruits" >香蕉</option>
                <option name = "fruits">苹果</option>
                <option name = "fruits">橘子</option>
                <option name = "fruits">橙子</option>
                <option name = "fruits">香梨</option>
                <option name = "fruits">桃子</option>
            </select>
            <input type = "button" value="单选" οnclick="singleSelect()"/>        
            <input type = "button" value="取消" οnclick="singleremove()"/>
            <input type = "button" value="全选" οnclick="doubleSelect()" />
            <input type = "button" value="全部取消"  οnclick="doubleremove()"/>
            <select size="10" style = "width: 100px;background-color: greenyellow;" name = "select_right" id = "select_right" multiple="multiple">
                <!--<option></option>
                <option></option>
                <option></option>
                <option></option>
                <option></option>
                <option></option>
                <option></option>-->
            </select>
            <script>
                var fruits = document.getElementsByName("fruits");
                var rightselect = document.getElementById("select_right");
                var leftselect = document.getElementById("select_left");
                var rightfruits = rightselect.getElementsByTagName("option");
                var fruits = leftselect.getElementsByTagName("option");
                var len = fruits.length;
                
                function doubleSelect(){
                    for(var i = 0; i < fruits.length; ){   
                        rightselect.appendChild(fruits[0]);  //用append时小心length长度会变化
                    
                    }
                }
                function doubleremove(){
                    
                    for(var i = 0;i < rightfruits.length;){
                        leftselect.appendChild(rightfruits[0]);    
                        
                    }    
                }
                function singleSelect(){                
                    for(var i = 0; i <fruits.length; i++){
                        if(fruits[i].selected){
                        rightselect.appendChild(fruits[i]);
                        i--;
                        
                        }
                    }
                }
                function singleremove(){
                    
                    for(var i = 0; i <rightfruits.length; i++){
                        if(rightfruits[i].selected){
                        leftselect.appendChild(rightfruits[i]);
                        i--;
                        }
                    }    
                }
            
            </script>
            
        </body>
    </html>

    展开全文
  • html代码:<!doctype html><html><head><...jQuery多条件筛选下拉选择框代码</title><link href="css/style.css" rel="stylesheet" type="text/css"><scrip...

    html代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery多条件筛选下拉选择框代码</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js"></script>
    </head>
    <body>
    <div class="selectbox">
    <div class="selemediv">
    <div class="selemenu " >
    <span class="sqinput">中国</span><span class="csinput"></span></div>
    <div class="citylist2">
    <div class="xzk">
    <div class="leibie">商圈</div>
    <ul class="shangquan">
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    </ul>
    </div>
    <div class="xzk">
    <div class="leibie">城市</div>
    <ul class="chengshi">
    <li class="active">菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li><li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    </ul>
    </div>
    </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
    <DIV class="citylist">
    <span>菜单一</span>
    <span>菜单二</span>
    <span>菜单三</span>
    <span>菜单四</span>
    </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
    <DIV class="citylist">
    <span>菜单一</span>
    <span>菜单二</span>
    <span>菜单三</span>
    <span>菜单四</span>
    </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
    <DIV class="citylist">
    <span>菜单一</span>
    <span>菜单二</span>
    <span>菜单三</span>
    <span>菜单四</span>
    </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
    <DIV class="citylist">
    <span>菜单一</span>
    <span>菜单二</span>
    <span>菜单三</span>
    <span>菜单四</span>
    </div>
    </div>
    </div>
    <div style="height:500px; color:#fff" id="cs"></div>
    </body>
    </html>js代码:

    $(".selemenu").click(function(){
    $(this).next().slideToggle();
    $(this).parents().siblings().find(".citylist,.citylist2").slideUp();
    });
    $(".citylist span").click(function(){
    var text=$(this).text();
    $(this).parent().prev().html(text);
    $(this).parent().prev().css("color","#666");
    $(this).parent().fadeOut();
    });
    $(".shangquan li").click(function(){
    $(".shangquan li").removeClass("active");
    $(this).addClass("active");
    var text1=$(this).text();
    $(".sqinput").html(text1)
    });
    $(".chengshi li").click(function(){
    $(".chengshi li").removeClass("active");
    $(this).addClass("active");
    var text2=$(this).text();
    $(".csinput").html("-"+text2);
    $(".citylist2").slideUp();
    });
    $(function(){
    $(document).not($(".selectbox")).click(function(){
    $(".citylist,.citylist2").slideUp();
    });
    $(".selectbox").click(function(event){
    event.stopPropagation();
    })
    })

    css代码:
    * {
    margin: 0;
    padding: 0;
    }
    .selectbox {
    height: 95px;
    width: 1170px;
    clear: both;
    margin: auto;
    background: #f7f7f7
    }
    .selemediv {
    width: 180px;
    height: 35px;
    float: left;
    margin-top: 30px;
    margin-left: 30px;
    position: relative
    }
    .selemenu {
    width: 180px;
    height: 35px;
    background: #fff;
    color: #999;
    text-indent: 10px;
    border: none;
    background: url(../images/xiala.png) 150px center no-repeat #fff;
    }
    .selemenu {
    font-size: 14px;
    line-height: 35px;
    }
    .citylist span {
    display: block;
    clear: both;
    cursor: pointer;
    }
    .citylist span:hover {
    background: #eee;
    }
    .citylist {
    display: none;
    line-height: 35px;
    background: #fff;
    text-indent: 10px;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: 35px;
    width: 180px;
    box-shadow: 0px 5px 5px #ccc;
    }
    .citylist2 {
    box-shadow: 0px 5px 5px #ccc;;
    font-size: 14px;
    color: #666;
    padding: 20px 40px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
    display: none;
    }
    .citylist2 ul {
    float: left;
    width: 930px;
    line-height: 54px;;
    }
    .citylist2 ul li {
    float: left;
    cursor: pointer
    }
    .citylist2 ul li:hover {
    color: #ff4400
    }
    .citylist2 .shangquan li {
    width: 11%;
    }
    .citylist2 .chengshi li {
    width: 20%;
    }
    .citylist2 .leibie {
    width: 100px;
    float: left;
    line-height: 54px;
    }
    ul, li {
    list-style: none;
    }
    .xzk {
    width: 1030px;
    overflow: hidden;
    clear: both
    }
    .citylist2 .active {
    color: #ff4400
    }实现效果如下;

    7d23d73b4f4a97beb25b934e997df403.png
    https://www.zhihu.com/video/1234587619738755072
    展开全文
  • jq实现动态下拉选择框

    千次阅读 2019-05-27 20:32:57
    HTML页面中,select标签可以很方便的解决下拉选择框的问题。但是下拉列表框中的内容,有时候需要根据某些页面的参数发生改变,这时就需要使用jq动态生成下拉选择框。 页面中policyid的下拉选择框需要根据参数...

    在HTML页面中,select标签可以很方便的解决下拉选择框的问题。但是下拉列表框中的内容,有时候需要根据某些页面的参数发生改变,这时就需要使用jq动态生成下拉选择框。

    页面中policyid的下拉选择框需要根据参数flightnum来改变。policyid在显示的时候,显示的是名称,但是值是其对应的id。

    前端代码如下:

    <input type="text" name="flightnum" id="flightnum" />
    
    <select name="policyid" id="policyid"></select>

    下面给出一种实现方式。

    前端js代码:

                    $("#flightnum").change(function(){
                         $.ajax({
                             url: "/flightBase/flightnum/"+$("#flightnum").val(),
                             dataType: "json",
                             success: function(data){
                                  $('#policyid').get(0).options.length = 0;
                                  $('#policyid').append('<option value="">请选择</option>');
                                  $.each(data, function(i, obj) {
                                   var option = $('<option />');
                                   option.val(obj.policyid);
                                   option.text(obj.policyname);
                                   $('#policyid').append(option);
                                 });     
                             },
                             error:function(){
                                alert("Error");
                           }
                         });
                    });

    当flightnum输入框的值发生改变后,policyid的下拉选择框就会发生改变。

    $('#policyid').get(0).options.length = 0;//的作用是先清空下拉列表框。

    如果只是页面第一次加载完成时,就生成下拉框,而且只生成这一次,则上面这行代码可以不用写。直接把ajax的代码写在$(function(){

    //写在这里就可以了

    $.ajax({

    });

    })
     

     

    后端实现:

        @RequestMapping("/flightnum/{flightnum}")
        @ResponseBody
        public FlightBase findOne(@PathVariable("flightnum") String flightnum)
        {
            
            QueryObject qo = new QueryObject();
            qo.setCompanyid( userUtilService.getBelongto());
            List<Policy> policylist  = policyService.query(qo);
            Map<String, Object> map = new HashMap<String, Object>();
            for(int i=0;i<policylist.size();i++){
                map.put(i+"", policylist.get(i));
            }
            return JSON.toJSONString(map);
        }

    后台使用的是mybatis框架,QueryObject是自定义的查询对象,用来传递查询参数。

    展开全文
  • countrypicker.js是一款jquery选择国家下拉列表插件。countrypicker.js带有搜索功能和显示国旗功能。通过简单的设置,既可以生成带既定国家的...HTML结构使用一个元素来作为该国家选择下拉列表HTML结构即可。...

    countrypicker.js是一款jquery选择国家下拉列表框插件。countrypicker.js带有搜索功能和显示国旗功能。通过简单的设置,既可以生成带既定国家的下拉列表框。

    使用方法

    在页面中引入jquery和bootstrap相关文件,以及bootstrap-select相关文件和countrypicker.js文件。

    HTML结构

    使用一个元素来作为该国家选择下拉列表框的HTML结构即可。

    注意必须带上class类selectpicker countrypicker。

    如果需要下拉列表框带有搜索功能,可以添加data-live-search属性。

    data-live-search="true">

    如果需要显示国旗,可以添加data-flag属性。

    data-live-search="true"

    data-flag="true">

    你还可以通过data-default属性来设置默认选择的国家。

    data-live-search="true"

    data-default="China"

    data-flag="true">

    countrypicker.js jquery选择国家下拉列表框插件的github地址为:https://github.com/Saganic/country-picker

    展开全文
  • 下拉选择框

    2018-07-06 14:39:06
    html:   &lt;!--&lt;label&gt;--&gt; &lt;!--&lt;select class="form-control" style="width: 164px;height:34px;" ng-model="errorType"&gt;--&...
  • selenium之 下拉选择框Select

    万次阅读 多人点赞 2016-08-18 23:52:39
    今天总结下selenium的下拉选择框。我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框。后者我们通常的处理方式与其他的元素类似,点击或使用JS等。而对于前者,selenium...
  • 下拉选择框、弹出框、滚动条操作

    千次阅读 2019-09-28 10:45:31
    1. 掌握下拉选择框的操作方法 2. 掌握处理弹出框的方法 3. 掌握调用JavaScript方法 1. 下拉选择框操作 说明:下拉框就是HTML中<select>元素; 1.1 如何操作下拉选择框? 案例 需求:使用‘注册A.html’...
  • selenium的下拉选择框

    2018-05-10 17:40:00
    今天总结下selenium的下拉选择框。我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框。 后者我们通常的处理方式与其他的元素类似,点击或使用JS等。而对于前者,...
  • 今天总结下selenium的下拉选择框。我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框。 后者我们通常的处理方式与其他的元素类似,点击或使用JS等。而对于前者,...
  • 自己实现了一个可以进行编辑的下拉选择框,主要功能点 可以进行输入的下拉选择框 根据输入内容筛选值 支持上下键进行下拉内容的选择 支持使用Enter键确认上下键选择的内容 支持ESC键退出选择 下面才是重点...
  • 今天总结下selenium的下拉选择框。我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框。后者我们通常的处理方式与其他的元素类似,点击或使用JS等。而对于前者,selenium...
  • selenium元素定位——下拉选择框 转载于:https://www.cnblogs.com/pxj2018/p/9881144.html
  • 在yii框架中CHtml类库主要负责协助我们使用优雅的方法生成HTML代码,例如:下拉选择列表,完整的代码如下: 北京 上海 天津 武汉 以上的结构,如果不使用助手,我们可能会使用以下的方法实现: /** ...
  • 说明:下拉选择框就是HTML中select标签 这里使用Selenium中两种方式对下拉选择框中元素进行选择操作:css定位操作(其他定位也可以)、select类。 需求:使用本地只含有select标签下拉选择框,默认选择是北京A,...
  • ul+jquery自定义下拉选择框 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;ul+jquery...
  • 元素用来创建下拉列表。 <select> 元素中的 <option> 标签定义了列表中的可用选项。 <select name="downlist"> <option>Java</option> <option>Python</option> <...
  • 一、下拉选择框 1、什么是下拉选择框 说明:下拉框就是HTML中&lt;select&gt;元素 2、为什么学习下拉选择框? (1)传统代码实现:  定位option选项(8中定位方式) (2)问题:  1、传统定位根据...
  • 今天给大家介绍一款基于jQuery美化联动下拉选择框。这款下下拉选择框js里自带了全国所有城市的数数库。下拉选择框适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下: ...
  • 元素用来创建下拉列表。 <select> 元素中的 <option> 标签定义了列表中的可用选项。 <select name="downlist"> <option>Java</option> <option>Python</option...
  • CSS3不一样的下拉选择框 本例中包含两个下拉选择框的动画示例,本例中并未使用select标签。本例中第一个案例也可用于标题、导航栏等位置。 案例一: html布局 <div class="content">  ...
  • Selenium下拉选择框select的处理

    万次阅读 2018-07-13 14:51:29
    在使用Selenium做自动化测试的时候,难免会碰到下拉选择框,下面几种方式是比较常用的处理方式。 为了方便使用,我自己写了一个HTML的demo: 代码如下:&lt;!DOCTYPE html&gt; &lt;html lang="en&...
  • 总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询; 二、直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPath,使用find_element_by_xpath定位; driver = ...
  • VUE联动下拉选择框

    2020-07-25 19:48:46
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &...
  • DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta ...
  • html <input class="search_text easyui-combobox" id="search_plate" editable="true"/> javascript var categoryList = [ { id:'1', value:'选项一' }, { id:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,084
精华内容 433
关键字:

html下拉选择框