`
heichong
  • 浏览: 45630 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js处理下拉菜单 select option

阅读更多
1.动态创建select

      function createSelect(){
          var mySelect = document.createElement("select");
          mySelect.id = "mySelect"; 
          document.body.appendChild(mySelect);
      }

2.添加选项option

     function addOption(){
         //根据id查找对象,
          var obj=document.getElementById('mySelect');
         //添加一个选项
          obj.add(new Option("文本","值"));    //这个只能在IE中有效
          obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }

3.删除所有选项option

     function removeAll(){
           var obj=document.getElementById('mySelect');
           obj.options.length=null;
     }

4.删除一个选项option

function removeOne(){
     var obj=document.getElementById('mySelect');
     //index,要删除选项的序号,这里取当前选中选项的序号
      var index=obj.selectedIndex;
     obj.options.remove(index);
}

5.获得选项option的值

     var obj=document.getElementById('mySelect');

     var index=obj.selectedIndex; //序号,取当前选中选项的序号

     var val = obj.options[index].value;

6.获得选项option的文本

     var obj=document.getElementById('mySelect');

     var index=obj.selectedIndex; //序号,取当前选中选项的序号

     var val = obj.options[index].text;

7.修改选项option

     var obj=document.getElementById('mySelect');

     var index=obj.selectedIndex; //序号,取当前选中选项的序号

     var val = obj.options[index]=new Option("新文本","新值");

8.删除select

      function removeSelect(){
            var mySelect = document.getElementById("mySelect");
            mySelect.parentNode.removeChild(mySelect);
     }

分享到:
评论

相关推荐

    日期下拉菜单select

    "日期下拉菜单select"是一种常见的表单元素,用于让用户方便地选择日期。它通常由三个下拉菜单组成,分别代表年、月和日,形成一个三级联动的效果。这种设计能够减少用户输入错误,提高数据录入的准确性。下面我们将...

    JS模拟select下拉菜单

    然而,有时为了实现更复杂的功能或者更好的视觉效果,开发者可能会选择使用JavaScript来模拟`<select>`下拉菜单。这种方法可以提供更多的自定义选项,如动画效果、多级下拉、异步加载等。 ### 1. 常规HTML `<select...

    select 分组下拉菜单自定义样式

    1. **模拟`select`**:通过使用HTML、CSS和JavaScript创建一个看起来像`select`的元素,然后使用JavaScript处理点击事件,动态显示和隐藏自定义的下拉菜单。这种方法可以实现高度定制,但需要更多的代码和维护。 2....

    js模拟点击select下拉菜单列表代码

    本文将详细讲解如何使用JavaScript来模拟点击一个`<select>`元素,从而展示其下拉菜单列表。`<select>`是HTML中用于创建下拉列表的标签,用户通常需要点击才能展开选项,但有时为了实现特定的交互效果,我们可能需要...

    jquery下拉菜单select二级菜单导航

    综上所述,"jquery下拉菜单select二级菜单导航"是一个将jQuery技术应用于创建交互式、分层的下拉菜单的过程。通过理解HTML、CSS和jQuery的基本原理,我们可以构建出高效且易于使用的导航工具,提升用户在网页中的...

    js,下拉菜单

    总的来说,JavaScript下拉菜单涉及HTML、CSS和JavaScript的组合使用,通过源码我们可以学习到如何动态操作DOM元素,以及如何响应用户交互。在实际项目中,选择合适的工具和库可以提高开发效率并确保兼容性,但理解...

    下拉菜单集合(二级、三级下拉菜单)

    为了增加动态效果和交互性,JavaScript(或jQuery等库)常被用来处理下拉菜单的打开和关闭事件。例如,监听`click`或`mouseover`事件,根据事件类型来显示或隐藏菜单。还可以添加其他功能,如禁用某些选项、跟踪用户...

    select下拉菜单

    本教程将深入探讨如何自定义一个具有独特背景和样式的`<select>`下拉菜单,并探讨其在多场景下的应用。 首先,我们要了解基本的`<select>`元素结构。一个简单的`<select>`元素如下所示: ```html <select> ...

    javascript html js 自定义多级联动下拉菜单,自定义select联动

    在JavaScript、HTML和JS的世界里,自定义多级联动下拉菜单是一种常见的交互设计,它通常用于提升用户体验,尤其是在处理复杂的数据层级结构时。本文将深入探讨如何利用这些技术实现自定义的select联动效果。 首先,...

    js 下拉菜单 特效

    在构建下拉菜单时,首先需要使用HTML的`<select>`和`<option>`标签来创建基础的下拉列表。例如: ```html <select id="myDropdown"> <option value="option1">选项1</option> <option value="option2">选项2</...

    select option带自定义图片

    在HTML和H5中,`<select>`元素用于创建下拉菜单,而`<option>`则是下拉菜单中的选项。然而,原生的`<option>`元素并不支持直接添加图片,但通过一些JavaScript和CSS的技巧,我们可以实现自定义带有图片的`<option>`...

    select下拉菜单美化

    在网页设计中,`<select>`元素通常用于创建下拉菜单,它提供了用户在一组预设选项中进行选择的功能。然而,原生的HTML `select`下拉菜单在样式定制方面存在局限,不能满足所有设计需求。为了实现更加美观且符合品牌...

    Select2实现全国省市区三级联动下拉菜单

    本教程将详细讲解如何利用`Select2`实现全国省市区的三级联动下拉菜单。 首先,我们需要理解`Select2`的核心功能。`Select2`可以将普通的HTML选择框转化为功能强大的输入控件,支持搜索、多选、远程数据加载等多种...

    JS+HTML联动下拉菜单

    这里的`parentSelect`是父级下拉菜单,`childSelect`是子级下拉菜单,初始状态被禁用,等待JS处理后激活。 然后,我们引入JavaScript(JS)来实现联动效果。JavaScript是一种客户端脚本语言,可以在浏览器环境中...

    JavaScript制作下拉菜单

    JavaScript制作下拉菜单是网页开发中的常见技巧,它能让用户在有限的空间内访问更多的功能选项,提高用户体验。本文将详细讲解如何使用JavaScript实现一个基本的下拉菜单。 首先,我们需要理解下拉菜单的基本结构。...

    Javascript实现的日期下拉菜单

    当我们谈论“Javascript实现的日期下拉菜单”时,我们通常是指利用JavaScript来创建一个用户可以选择特定日期的界面元素,这种交互方式常见于表单提交或者事件预订等场景。下面将详细介绍如何使用JavaScript来实现...

    javascript 下拉菜单(各种各样的)

    以下是关于JavaScript下拉菜单的一些关键知识点: 1. HTML结构:下拉菜单的基础结构通常由`<select>`标签构建,其中包含一系列`<option>`标签来定义菜单项。然而,为了实现更复杂的交互和自定义样式,开发者通常会...

    js动态设置select下拉菜单的默认选中项实例

    在这篇文章中,我们将介绍如何使用JavaScript来动态设置select下拉菜单的默认选中项。这个过程对于Web开发人员来说是非常常见的需求,尤其是在需要根据不同的条件来显示不同的下拉菜单选项时。 首先,我们需要了解...

    javascript四级级联下拉菜单

    在级联下拉菜单中,我们通常会使用`<select>`元素来创建下拉菜单,并通过`<option>`元素定义可选的值。当用户在某一级菜单中做出选择时,JavaScript会监听这个事件,然后根据所选值动态生成或更新下一级菜单的内容。...

    jquery下拉菜单插件SelectMenu

    `SelectMenu.js` 是一款基于 jQuery 的高效下拉菜单插件,它提供了丰富的特性,使开发者能够轻松创建具有高级功能的下拉菜单。本文将详细介绍 `SelectMenu.js` 的核心特性和使用方法。 ### 1. 插件简介 `Select...

Global site tag (gtag.js) - Google Analytics