jquery可以勾选的下拉框_Jquery操作下拉列表和复选框,自定义下拉

后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦

如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中

先来看个下拉列表

张店

淄川

博山

桓台

上面是一个非常简单的下拉列表,加了一个按钮,可以选取他们的值,取值的话就得给下拉列表加value

运行后就是这样的:

然后需要用到Jquery,所以要先引入Jquery包

然后就可以写js代码了

对括号里面的e,有解释,来看一下e.都包括哪些数据

如果这个事件不是点击事件,是关于按键的事件,如按键按下按键抬起,则这时候e就包含了按键的数据,能够取到能按了什么键

来看一下运行的结果

下拉列表选中哪个,然后点击取值,就会取到选中的那个值

再加一个赋值的按钮

写赋值的js代码部分

赋值和取值都需要val方法就可以完成

来看一下运行结果

比如说,本来是这个状态:

然后点击一下赋值

就会变成代码内val值对应的地址

下面再来看个复选框列表

看一下js代码部分

运行后的结果:

如果三个都选中,那么会弹出三个窗口,先是张店,点击确定然后淄川,再点确定随后周村

有取值了,可以再给它设个赋值试试

js代码部分

看一下能不能运行成功

点击赋值后,就选中了值为周村的复选框,运行成功

这样有点麻烦,还有简单的做法

只需要三句,看一下能不能运行成功

点击赋值,可以选中,运行成功

下面做一个,自定义的下拉列表,外加一个开灯关灯效果

无标题文档

#zz{width:100%;height:100%;position:absolute;left:0px;top:0px;background-color:black;z-index:5;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值