`

JS操作select下拉框动态变动(创建/删除/获取)

 
阅读更多
动态创建及删除select、添加及删除选项option、获得选项option的值、获得选项option的文本等等,感兴趣的朋友可以参考下哈
1.动态创建select 
复制代码代码如下:

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

2.添加选项option 
复制代码代码如下:

function addOption(){ 
//根据id查找对象, 
var obj=document.getElementByIdx_x('mySelect'); 
//添加一个选项 
obj.add(new Option("文本","值")); 

3.删除所有选项option 
复制代码代码如下:

function removeAll(){ 
var obj=document.getElementByIdx_x('mySelect'); 
obj.options.length=0; 

4.删除一个选项option 
复制代码代码如下:

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

5.获得选项option的值 
复制代码代码如下:

var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].value; 

6.获得选项option的文本 
复制代码代码如下:

var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].text; 

7.修改选项option 
复制代码代码如下:

var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index]=new Option("新文本","新值"); 

8.删除select 
复制代码代码如下:

function removeSelect(){ 
var mySelect = document.getElementByIdx_x("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
分享到:
评论

相关推荐

    JavaScript实现向select下拉框中添加和删除元素的方法

    使用JavaScript和jQuery可以很方便地向select下拉框中动态添加和删除选项。下面详细介绍这一过程的知识点。 ### jQuery的append()方法 jQuery的append()方法可以将指定的内容添加到被选元素的末尾。在操作select...

    BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。 这个很好解决: 如下: </div> <select class=form-control onchange=selectOnchang(this)> 所有申请商家</...

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

    在网页开发中,为了提供用户友好的交互体验,经常需要实现一些动态的、有层次的数据选择功能,例如省市区三级联动下拉菜单。在这种场景下,`Select2` 库是一个非常优秀的工具,它能够帮助开发者创建功能强大、易于...

    jQuery省市自治区下拉框单选多选代码.zip

    3. 动态生成下拉框:数据加载后,遍历数据,为每个级别创建`<option>`元素,并插入到相应的`<select>`中。同时,可以设置默认值,确保页面加载时已有初始选择。 4. 事件监听:为了实现联动效果,我们需要监听每个...

    avue-crud-数据字典(网络-dicUrl:返回数据格式data:)

    CRUD是Create(创建)、Read(读取)、Update(更新)和Delete(删除)四种基本数据库操作的缩写,是数据库管理的核心。 在avue中,"数据字典"通常用来表示一组固定的选项或者枚举值,例如性别、状态、级别等,这些...

    jQuery省市区三级和四级联动演示

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本示例“jQuery省市区三级和四级联动演示”是针对web表单设计的一个功能,常见于地址输入或者区域选择场景。这个...

    JS实现左边列表移到到右边列表功能

    在本文中,我们将深入探讨如何使用JavaScript来实现一个功能,即允许用户将左边下拉框中的选项移动到右边下拉框,并支持多选操作及列表内项目的上下移动。这个功能对于构建具有交互性的用户界面非常有用,特别是当...

    美化版的jQuery全国城市级联菜单代码包

    摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包,Select下拉框已经过美化,比传统的灰色风格Select下拉列表更美观,城市菜单信息存放在XML文件内,若城市信息有所变动,...

    tapestry4.0简易教程

    ### Tapestry 4.0 简易教程知识点解析 #### 一、基础知识(Using Forms) **1.1 Page文件和Class文件联系** - **概念理解:** 在Tapestry框架中,`Page`文件与对应的Java `...- **概念理解:** 创建动态表单的基础...

    vue中v-model的应用及使用详解

    在 Vue 中,`v-model` 指令用于实现视图与模型之间的双向数据绑定,使得用户界面(UI)的变动可以同步反映到数据模型上,反之亦然。这与 jQuery 等传统库中的数据绑定方式有所不同,Vue 的 `v-model` 提供了一种更...

Global site tag (gtag.js) - Google Analytics