使用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

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

赞 (0)

相关推荐

  • androidUI控件Spinner下拉菜单控件两种使用方法

    使用android制作表单中下拉菜单所使用的控件Spinner在android中为我们定义了十分好用好看的样式,同样简单使用方法也有两种.分别可以手工构建数据和使用xml获取数据,当然实际项目中需要获 ...

  • Html下拉框Select联动实例

    在开发网站时,经常会有二个或多个select下拉框联动的情况,比如省份和城市二个下拉框联动,在省份下拉框里选择不同的省,第二个下拉框城市就要对应该省份下的城市数据. 下面一起来看下,怎么用Javasc ...

  • 如何使select2插件下拉框多选并获取选中的值

    select2是jQuery的一个下拉框插件,有单选.多选.搜索.禁用等功能.下面利用一个实例来说明select2多选框的使用方法,并获取选中的值,具体操作如下: 操作方法 01 第一步,创建静态页面 ...

  • Auxre RP怎么给下拉框绑定事件?

    Axure RP是一款比较常用的原型界面工具,在利用该工具进行原型设计时,我们肯定会想尽可能的将网页效果展示出来.下拉框是经常要用到的一个工具,在代码实现过程中经常会根据下拉框值改变而显示不同的内容. ...

  • Jquery如何操作多选框？

    Html代码里多选框控件,在生成后多数情况都是给用户点击选择的,但有时候程序也需要操作这些控件.下面一起来看下用JQuery怎么操作. 操作方法 01 首先看下我们的Html代码,就是一组Checkb ...

  • Axure RP 8下拉框怎么控制文本框标题字体?

    Axure RP 8设计软件原型工具中的下拉框,可以展示多个值,在切换选项时,改变文本框和标题.下面利用一个实例说明这个背景,操作如下: 1.双击打开Axure RP 8设计软件,在表单元件中拖曳一个 ...

  • Axure RP 8怎么创建下拉框?

    Axure RP 8是快速设计原型工具,可以设计出各种不同的原型.下面将讲述如何利用Axure RP 8设计出下拉框,具体操作如下: 1.首先,将安装好的Axure RP 8软件打开,这时窗口出现Ho ...

  • 如何在Excel表格中制作下拉框

    如何在Excel表格中制作下拉框

    我们想要在表格中制作下拉符号,该怎么操作呢?今天就跟大家介绍一下如何在Excel表格中制作下拉框的具体操作步骤.1. 首先打开电脑,找到桌面上的Excel表格,双击打开.2. 然后在表格中,找到想要添 ...

  • 如何使用按钮控制下拉框的添加和删除

    动态控制下拉框select每一项option节点的添加与删除 操作方法 01 第一步,我们先把静态页面做出来,静态页面上就放一个下拉框<select></select>,并且在 ...