观看记录
  • 我的观影记录
登录
测试首页使用Jquery如何操作下拉框控件?

使用Jquery如何操作下拉框控件?

下拉框选择控件,在网页开发中,是经常使用到的一个控件。所以会对它有很频繁的操作,借助Jquery,我们可以很方便地对它进行操作控制。
下面一起来看些例子。

操作方法

  • 01

    先看下我们的例子HTML代码,很简单,就是一个标准的Select下拉框选择控件,加几个按钮。如图

  • 02

    运行后,界面如图

  • 03

    我们加上代码,实现第一个按钮的逻辑。
    用代码去选中下拉框的值,用Jquery的 val()方法就行,
    ("#sel").val('2'); // 2就是下拉框对应项的value值。

  • 04

    刷新页面后,点击第一个按钮,可以看到下拉框的第二项被选中了。

  • 05

    能设置选中项,当然也能获取是哪项选中了,这里加上第二个按钮的逻辑,获取选中项的值,我们也是用 val()方法,不过这次不用传参数,(有参数时,是设置值)
    ("#sel").val();

  • 06

    重新刷新页面后,点击第二个按钮,可以看到下拉框选中项的value值在弹出框里显示出来了。

  • 07

    第三个按钮的逻辑,添加一个下拉框的选项,用append方法,直接加上option项就行,
    ("#sel").append("<option value='4'>搜狗地图</option>");

  • 08

    刷新页面后,点击对应按钮,新加的选项正常加上了:)

  • 09

    最后一个按钮的逻辑了,删除一个下拉选项,用的是remove方法,
    我们删除value=2的第二项,首先用选择器选择到 value为 2的项,然后用remove方法,就可以了。

    ("#sel option[value='2']").remove();

  • 10

    刷新页面,点击第四个按钮,第二项被删除了。

  • End

“使用Jquery如何操作下拉框控件?”关联的文章

  • 电脑网络异常

    进入电脑界面后,需要打开设置图标,进入后点击网格和Internet选项中心进行操作,以下是详细步骤操作:

    1小时前0阅读

    电脑网络异常
  • 美团电动车怎么还车

    美团电动车怎么还车?下面给大家详细介绍一下具体步骤及说明。

    1小时前0阅读

    美团电动车怎么还车
  • 腾讯新闻怎么关闭视频自动播放
  • 快速除痱子

    夏天到了,人们身上容易长痱子,有什么办法可以轻松除掉痱子吗,今天小编找到了几种方法,希望能帮到你。

    1小时前0阅读

  • 华为手机畅享7,怎样设置指纹锁
  • 做深蹲运动有什么好处

    做深蹲运动有什么好处呢?很多人都不知道,下面小编来告诉大家。

    1小时前0阅读

  • 果酱烤棉花糖的制作方法

    棉花糖的香甜美味与果酱的清新可口会撞出怎样的味道呢?今天小编就来介绍一下果酱烤棉花糖的制作方法。

    1小时前0阅读

  • 原神机关烹饪之法之二怎么过关

    原神机关烹饪之法之二怎么过关?韶光抚月第二阶段活动有些玩家已经顺利完成了,这里给大家带来了原神机关烹饪之法之二玩法技巧,一起来看下文中介绍吧。

    2小时前0阅读

    原神机关烹饪之法之二怎么过关
  • 如何让idm不要自动下载视频

    用浏览器打开带有视频的网页,便会自动下载此页面的所有视频。如何禁止IDM自动下载视频呢?请看下面的经验。

    2小时前0阅读

    如何让idm不要自动下载视频
  • 手机用什么浏览器好?

    网络时代的到来,丰富了我们的生活,出现了越来越多的浏览器,你用的哪一款浏览器?你知道哪一款浏览器最好用吗?下面我们就一起来看看吧。

    2小时前0阅读

切换深色外观
留言
视频编辑修改
回到顶部
首页
手机数码
医疗健康
金融管理
社交情感
无名