动态创建及删除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);
}
复制代码代码如下:
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和jQuery可以很方便地向select下拉框中动态添加和删除选项。下面详细介绍这一过程的知识点。 ### jQuery的append()方法 jQuery的append()方法可以将指定的内容添加到被选元素的末尾。在操作select...
Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。 这个很好解决: 如下: </div> <select class=form-control onchange=selectOnchang(this)> 所有申请商家</...
在网页开发中,为了提供用户友好的交互体验,经常需要实现一些动态的、有层次的数据选择功能,例如省市区三级联动下拉菜单。在这种场景下,`Select2` 库是一个非常优秀的工具,它能够帮助开发者创建功能强大、易于...
3. 动态生成下拉框:数据加载后,遍历数据,为每个级别创建`<option>`元素,并插入到相应的`<select>`中。同时,可以设置默认值,确保页面加载时已有初始选择。 4. 事件监听:为了实现联动效果,我们需要监听每个...
CRUD是Create(创建)、Read(读取)、Update(更新)和Delete(删除)四种基本数据库操作的缩写,是数据库管理的核心。 在avue中,"数据字典"通常用来表示一组固定的选项或者枚举值,例如性别、状态、级别等,这些...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本示例“jQuery省市区三级和四级联动演示”是针对web表单设计的一个功能,常见于地址输入或者区域选择场景。这个...
在本文中,我们将深入探讨如何使用JavaScript来实现一个功能,即允许用户将左边下拉框中的选项移动到右边下拉框,并支持多选操作及列表内项目的上下移动。这个功能对于构建具有交互性的用户界面非常有用,特别是当...
摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包,Select下拉框已经过美化,比传统的灰色风格Select下拉列表更美观,城市菜单信息存放在XML文件内,若城市信息有所变动,...
### Tapestry 4.0 简易教程知识点解析 #### 一、基础知识(Using Forms) **1.1 Page文件和Class文件联系** - **概念理解:** 在Tapestry框架中,`Page`文件与对应的Java `...- **概念理解:** 创建动态表单的基础...
在 Vue 中,`v-model` 指令用于实现视图与模型之间的双向数据绑定,使得用户界面(UI)的变动可以同步反映到数据模型上,反之亦然。这与 jQuery 等传统库中的数据绑定方式有所不同,Vue 的 `v-model` 提供了一种更...