js 下拉框效果
<script type="text/javascript">
window.onload = function ()
{
var oSelect = document.getElementsByTagName("input")[];
var oSub = document.getElementsByTagName("ul")[];
var aLi = oSub.getElementsByTagName("li");
var i = ; var Select = document.getElementsByTagName("input")[];
var Sub = document.getElementsByTagName("ul")[];
var aLii = Sub.getElementsByTagName("li");
var j = ; oSelect.onclick = function (event)
{
var style = oSub.style;
style.display = style.display == "block" ? "none" : "block";
//阻止事件冒泡
(event || window.event).cancelBubble = true
}; Select.onclick = function (event)
{
var style = Sub.style;
style.display = style.display == "block" ? "none" : "block";
//阻止事件冒泡
(event || window.event).cancelBubble = true
}; for (i = ; i < aLi.length; i++)
{
//鼠标划过
aLi[i].onmouseover = function ()
{
this.className = "hover"
};
//鼠标离开
aLi[i].onmouseout = function ()
{
this.className = "";
};
//鼠标点击
aLi[i].onclick = function ()
{
//alert(this.innerHTML);
//oSelect.innerHTML = this.innerHTML
oSelect.value = this.innerHTML;
//alert(oSelect.value);
}
} for (j = ; j < aLii.length; j++)
{
//鼠标划过
aLii[j].onmouseover = function ()
{
this.className = "hover"
};
//鼠标离开
aLii[j].onmouseout = function ()
{
this.className = "";
};
//鼠标点击
aLii[j].onclick = function ()
{
Select.value = this.innerHTML;
Sub.style.display = "none"; }
}
document.onclick = function ()
{
oSub.style.display = "none";
Sub.style.display = "none";
}; };
</script>
性别下拉框的jquery
//点击性别文本框,弹窗具体信息
$(".info_select").click(function(){
$("#select_sex").css("display" , ($("#select_sex").css("display")=='none' ? "block" : 'none'));
(event || window.event).cancelBubble = true
});
$("#info_img_sex").click(function(){
$("#select_sex").css("display" , ($("#select_sex").css("display")=='none' ? "block" : 'none'));
(event || window.event).cancelBubble = true
});
$("#sex_boy").click(function(){
$("#select_sex").css("display","none");
$(".info_select").attr("value","男");
});
$("#sex_girl").click(function(){
$("#select_sex").css("display","none");
$(".info_select").attr("value","女");
});
$("#sex_sc").click(function(){
$("#select_sex").css("display","none");
$(".info_select").attr("value","保密");
}); document.onclick = function ()
{
$("#select_sex").css("display","none");
};
js 下拉框效果的更多相关文章
- js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- JQuery和ASP.NET分别实现级联下拉框效果
在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...
- js下拉框
Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html
- js下拉框去掉重复的
想用jquery代码实现这样的一个功能:有一个下拉框,当选择下拉框的时候,判断选择的值有没有被选择过,如果有则提示:代码如下: $(function(){ var authTypes=new Arra ...
- js下拉框选择图片
二种方式:下拉框里面选项有图片与没有图片 1.用下拉框写 下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式. <!DOCTYPE html> <html> ...
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...
- jquery实现模拟select下拉框效果
<IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...
- js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
- 微信小程序:picker组件实现下拉框效果
一.wxml中代码 <view class="in_order_Param"> <text>状态:</text> ...
随机推荐
- webView的一些经验总结
部分内容再录于:http://www.360doc.com/content/14/0611/13/15210553_385676271.shtml 一. 加载资源的速度不慢,但是资源多了,就很慢 ...
- 根据老赵轻量级Actor进行修改的Actor模型
学习了老赵轻量级Actor模型,并在实际中使用,效果不错. 老赵轻量级Actor模型: ActorLite:一个轻量级Actor模型实现(上) ActorLite:一个轻量级Actor模型实现(中) ...
- windows如何获取Win10 Win8 Win8.1版本
GetVersionEx 在win8 win8.1 win10 之后已经无法使用,如果非要使用的话需要让exe嵌入manifest,mainfest如下.这个文件需要已utf-8存储. <?xm ...
- Lua与C++的交互
这篇文章说的挺详细的:Lua与C++的交互
- leetcode 3Sum python
# sort the array# loop from i = 0 # then left=i+1 right=len(nums)-1# try nums[i] - ( nums[left]+nums ...
- JS输出当前时间,且每秒变化
<div id="timer"></div> <script type="text/javascript"> window. ...
- 什么是Web前端,Web前端是做什么的?
什么是Web前端 Web前端,顾名思义是来做Web的前端的.而Web前端开发应该就是来开发基于Web前端的相关应用的或者说是来开发前端的.那么,前端又是什么呢?我们这里所说的前端泛指Web前端,也就是 ...
- 《离散数学之把妹要诀》的js实现
网上看到一篇有意思的文章<离散数学之把妹要诀> 就用JS写了上面所讲的配对方式: 首先设定变量 // 男生理想列表 var menPreference = { A: [1, 2, 3, 4 ...
- hibernate中多对多关联
hibernate中多对多关联 “计应134(实验班) 凌豪” 在关系数据库中有一种常见的关系即多对多关系,例如课程和学生的关系,一个学生可以选择多门课程,同时一门课程也可以被多个学生选择, 因此课程 ...
- 我用的php开发环境是appserv一键安装,通过http://localhost测试成功,但是我有点不清楚的就是为什么访问.php文件要在地址栏上加上localhost(即http://localhost/text.php)才能成功访问?
这类似于一个域名地址. 因为默认localhost 就是指向本机.所以就用这个来访问自己本地的网页.比如你也可以输入 http://127.0.0.1/text.php http://192.168. ...