如何使用按钮控制下拉框的添加和删除【百科全说】

动态控制下拉框select每一项option节点的添加与删除

操作方法

01

第一步，我们先把静态页面做出来，静态页面上就放一个下拉框<select></select>，并且在select里面给你个默认的<option></option>，然后在添加一个添加按钮<button>和一个添加的输入框<input>，再添加一个删除的按钮和一个删除的输入框，代码如下：
02

然后在浏览器中运行这个静态页面，效果如下：
03

接下来就是要做按钮的点击事件处理了，我们要做的效果是这样的，在添加按钮左边的输入框输入要添加的select下拉项的名称，然后点击添加按钮，select下拉项里面就会添加进入一个你输入的下拉项。同理，在删除按钮左边的输入框里面输入要删除的下拉项的名称，然后点击删除按钮，即可删除掉select里面对应的下拉项，完整的js如下：
04

首先需要引入jquery的js，然后再来看看添加按钮的点击事件控制的js，第一步是先获取添加按钮左边输入框输入的内容，使用name属性选择器来回去它的val，然后再创建一个option节点，把它append到select里面，js代码如下：
05

然后我们在浏览器打开网页，看看效果，在添加的输入框输入要添加的名称，然后点击添加按钮，然后我们把下拉框点开，就会发现下拉框里面多了一条你刚才输入的名称：
06

然后再来看删除一个option的js写法，首先给删除的button添加onclick事件监听，然后获取删除按钮左边的输入框的值，通过name属性选择器获取，然后再通过value属性选择器找到select里面对应的option，然后通过remove方法进行删除，js代码如下：
07

然后我们在浏览器打开网页，看看效果，在删除的输入框输入要删除的名称，然后点击删除按钮，然后我们把下拉框点开，就会发现下拉框里面你刚才输入的名称已经没有了：

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

操作方法

相关推荐