下拉框选择

最新推荐文章于 2023-04-03 18:12:38 发布
最新推荐文章于 2023-04-03 18:12:38 发布
阅读量76 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lvziyan/p/5916608.html
版权
1，简单下拉框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1">
   <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
   <style type="text/css">
   ul{padding: 0;margin:0;}
   ul li{height: 25px;line-height:25px;list-style: none;border: 1px solid #ccc;}
   </style>
</head>
<body>
	<div class="wrap">
		<div class="tg-select" >
			<input value="请选择" readonly="readonly" type="text">
			<ul style="display: none;">
				<li data-value="1">1</li>
				<li data-value="2">2</li>
				<li data-value="3">3</li>
				<li data-value="4">4</li>
			</ul>
		</div>		
	</div>

<script>

	$('.tg-select').click(function(){
		$(this).find('ul').toggle();
	})
	$('.tg-select li').click(function(){
        var val=$(this).text();
		$(this).parents('.tg-select').find('input').val(val);
	})
		
</script>
</body>
</html>
2，带遮罩层的下拉框选择

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1">
   <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        .input_select{width:150px; height:24px; line-height:24px;}
         #dropdown{width:170px;position:relation;}
         .drop-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:99;display:none;}
         #dropdown ul{position:absolute;display:none;width: 100%;left: 0;bottom: 0;z-index:100;}
         #dropdown ul li{background:#fff;text-align:center;height:30px;line-height:30px;min-height:30px;width:auto;border-bottom: 1px solid #d4d4d4;}
         #dropdown ul li a{display:block;  color:#807a62; text-decoration:none} 
         #dropdown ul li a:hover{background:#f4f4f4; color:#369} 
    </style>
</head>
<body>
 <div class="drop-mask"></div> 
     <span>
        <div id="dropdown"> 
                            <input readonly class="frameOrEngine input_select" type="text"  placeholder="请输入选中数" 
                            />                         
                            <ul> 
                                <li><a rel="4">4</a></li> 
                                <li><a rel="5">5</a></li> 
                                <li><a rel="6">6</a></li> 
                                <li><a rel="7">7</a></li>
                                <li><a rel="8">8</a></li> 
                                <li><a rel="9">9</a></li>  
                            </ul>                             
                        </div>                     
                    </span> 
    <script>    
                    $(".input_select").click(function(){ 
                    var ul = $("#dropdown ul"); 
                    if(ul.css("display")=="none"){ 
                    ul.slideDown("fast"); 
                    $(".drop-mask").show();
                    }else{ 
                    ul.slideUp("fast"); 
                    $(".drop-mask").hide();
                    } 
                    });
                $("#dropdown ul li a").click(function(){ 
                    var txt = $(this).text(); 
                    $(".input_select").val(txt); 
                    $("#dropdown ul").hide(); 
                    $(".drop-mask").hide();
                    });                    
    </script>    
</body>
</html>

 

转载于:https://www.cnblogs.com/lvziyan/p/5916608.html

weixin_30954265
关注
下拉选择框
算法与编程之美
03-24 3283
1.问题描述当我们在填一些问卷的时候，问卷的设计基本都是通过输入框实现的，普通的输入框就是一个问题后面会出现一个填写内容的框架，有时还会出现下拉选择框，下拉选择框的实现是与普通输入框不一样的，下面将介绍下拉选择框的算法。2.算法描述首先，会用到el-select组件，v-model和value是绑定值，类型为string/number；placeholder是输入框占位文...
下拉框-选择元素
ihuangtian的博客
03-11 1796
下拉框-选择元素 具体演示代码如下 package com.test.demo; import com.test.Init_Page; import org.openqa.selenium.WebElement; import org.openqa.selenium.support.FindBy; import org.openqa.selenium.support.ui.Select...
Selenium之下拉框操作详解
测试萌萌
04-03 1万+
前言：执行自动化测试过程中遇到下拉框，包含：单选、多选，如何定位到下拉框并选中某个选项？
下拉框选择事件动态加载echart数据
09-11
标题“下拉框选择事件动态加载ECharts数据”揭示了我们的目标：当用户在下拉框中选择不同的选项时，ECharts图表应根据所选选项异步加载并更新相关数据。这种功能可以提高用户体验，让用户能够快速查看不同条件下的...
基于jQuery的select下拉框选择触发事件实例分析
12-29
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考，具体如下： 我一直以来都认为，select 下拉框选择对选项 options 使用 onclick 注册事件即可，如下： <select> 选项一...
jQuery实现下拉框选择图片功能实例
10-23
总结起来，本实例展示了如何利用jQuery和`imageselect.js`插件实现一个功能丰富的下拉框，它不仅能显示文本选项，还能展示与选项关联的图片，提高了用户在选择过程中的可视性和互动性。这种技术在现代Web开发中有着...
js实现select下拉框选择
10-15
本文将详细介绍如何使用JavaScript实现一个自定义的select下拉框选择功能，以解决在不兼容IE浏览器版本时遇到的问题。首先，我们分析给出的HTML、CSS和JavaScript代码，然后逐步解析每个部分的功能。 1. HTML结构：...
BootStrap中关于Select下拉框选择触发事件及扩展
01-19
Select下拉框的问题，想在选择一个选项后，前台显示做出变动，并且知道选择的是第几个选项。 这个很好解决： 如下: <select class=form-control onchange=selectOnchang(this)> 所有申请商家 待审核商家...
selenium之下拉选择框
LYX_WIN
08-20 1万+
一、前言 selenium的下拉选择框。我们通常会遇到两种下拉框，一种使用的是html的标签select，另一种是使用input标签做的假下拉框。 后者我们通常的处理方式与其他的元素类似，点击或使用JS等。而对于前者，selenium给了有力的支持，就是Select类。 进行测试的网站：http://sahitest.com/demo/selectTest.htm 网页及对应源码： 二、关于导入方式 两种导入方式： from selenium.webdriver.support.ui imp
Vue2选择器（Select）
Mr Dear的博客
05-26 2万+
使用Vue2封装的与ant design样式类似的下拉选择器组件。
selenium之 下拉选择框Select
热门推荐
灰蓝
08-18 9万+
今天总结下selenium的下拉选择框。我们通常会遇到两种下拉框，一种使用的是html的标签select，另一种是使用input标签做的假下拉框。后者我们通常的处理方式与其他的元素类似，点击或使用JS等。而对于前者，selenium给了有力的支持，就是Select类。我们要进行试验的网站：http://sahitest.com/demo/selectTest.htm网页与源码截图如下：1.导入（im
jquery操作select下拉框的多种方法(选中,取值,赋值等)
fu_manxing的专栏
09-08 2万+
Query获取Select选择的Text和Value: 语法解释： 1.$("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发 2. varcheckText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3.
CSS3中常用的几种选择器
Web_chicken的博客
09-08 8938
css中几种常用的选择器 1.通配符 *{ margin:0; padding:0; } 因为浏览器默认有margin和padding 而通配符主要作用就是去掉margin和padding 一般写在css最前 2.id选择器 #first{ color:red; } <div id="first">我是id选择器</div> id选择器 调用css样式时需要用# 不推荐使用i
jQuery获取下拉列表框当前选择值和内容 && value最大值
lsh15846393847的博客
10-09 9819
1 获取value $("#fukusyaNendo").val();//获取当前选择项的值. var options=$("#fukusyaNendo option:selected");//获取当前选择项. options.val();//获取当前选择项的值. 2.获取内容 var options=$("#fukusyaNendo option:selected"); va...
下拉列表的左右选择的实现
云飞
11-15 2141
今天为大家分享的是下拉列表的左右选择的实现，首先先看一下效果图： 首先给大家解释下以上看到的效果图：第一副是初始效果，第二幅是我我 选中了左边的语文和英语，然后点击选中添加到右边的效果图，第三幅是我直接点击了全部添加到右边按钮实现的效果，相信大家看到这就能明白效果图的含义了。至于点击选中添加到左边和全部添加到左边按钮想必大家也能想象到了，大家感兴趣的可以自己写一个实现看下效果，以下为大家
excel如何设置下拉框选项
诚的博客
09-03 4万+
当我们需要在Excel中大量输入相同的多个数据时，可以设置下拉框选项，这能极大程度上减少我们的工作量。看看如何进行操作吧。 工具/原料 电脑 Excel表 方法/步骤 例如，我们完成如下的表格，在空白的地方输入要设置下拉框选项的文字“男、女”。然后选定需要设置下拉框选项的区域。 点击功能区内的“数据”--“数据有效性”。 在数据有效性的下拉边框内点击选择“设置”--“允许”下的“序列”。 然后在“来源”后面，点击选择数据来源选择
selenium实战下拉框选择
最新发布
08-16
使用Selenium实现下拉框选择的步骤如下： 1. 定位下拉框元素：首先需要找到要操作的下拉框元素，可以使用`find_element()`或`find_elements()`方法定位。一般下拉框元素是`<select>`标签。 2. 创建Select对象：将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值