<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态添加删除option</title>
<script>
//动态删除select中的所有options:
function delAllOptions(){
document.getElementByIdx("user_dm").options.length=0;
}
//动态删除select中的某一项option:
function delOneOption(indx){
document.getElementByIdx("user_dm").options.remove(indx);
}
// 动态添加select中的项option:
function addOneOption(){
//document.getElementByIdx("user_dm").options.add(new Option(2,"mytest"));
var selectObj=document.getElementByIdx("user_dm");
alert(selectObj.length);
selectObj.options[selectObj.length] = new Option("mytest", "2");
}
</script>
</head>
<body>
<select id="user_dm" name="user_dm">
<option value="0" selecte>==请选择人员==</option>
<option value="1">test</option>
</select><br>
<input type="button" onClick="addOneOption()" value="添加">
<input type="button" onClick="delOneOption(1)" value="删除第一个">
<input type="button" onClick="delAllOptions()" value="清空">
</body>
</html>
========================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js动态添加与删除Option对象</TITLE>
<script language="JavaScript">
// 添加选项
function addOption(pos){
var objSelect=document.getElementByIdx("mySelect");
// 取得字段值
//var strName = document.myForm.myOptionName.value;
// var strValue = document.myForm.myOptionValue.value;
// 建立Option对象
var objOption = new Option("aaaaaaaa","bbbbbbbbb");
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}
// 删除
function deleteOption(type){
var objSelect=document.getElementByIdx("mySelect");
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(){
var objSelect=document.getElementByIdx("mySelect");
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
}
//动态删除select中的所有options:
function clearAllOptions(){
var objSelect=document.getElementByIdx("mySelect");
objSelect.options.length=0;
}
</script>
</HEAD>
<BODY>
<h2>Js动态添加与删除Option对象</h2>
<hr>
<select id="mySelect" name="mySelect">
<option value="中国" Selected>中国</option>
<option value="日本">日本</option>
<option value="美国">美国</option>
</select>
<input type="button" onclick="showOption(this.form)" value="显示">
<input type="button" onclick="deleteOption(true)" value="删除">
<input type="button" onclick="deleteOption(false)" value="Remove方法"><br><br>
选项名称 : <input type="text" name="myOptionName" value="英国"><br>
选项的值 : <input type="text" name="myOptionValue" value="value4">
<input type="button" onclick="addOption(-1)" value="添加">
<input type="button" onclick="addOption(0)" value="插入到最前面">
<input type="button" onclick="clearAllOptions()" value="清空">
</BODY>
</HTML>
注:本文转自网络
分享到:
相关推荐
总结来说,要实现`<select>`和`<option>`带有自定义图片的效果,我们需要结合HTML的`data-*`属性,JavaScript的动态操作和CSS的样式设计。这不仅增强了用户体验,也展示了前端技术在实现视觉效果方面的灵活性。在...
### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时,经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能: ```javascript ...
在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...
### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`<select>`元素作为用户交互的重要部分,常用于提供一系列选项供用户选择。jQuery作为一种流行的JavaScript库,极大地简化了DOM操作的过程,使得...
### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中,`<select>` 元素是一种常见的表单控件,用于收集用户输入的选择项。它通常包含多个 `<option>` 子元素供用户选择。通过 JavaScript,我们可以实现...
通过JavaScript的DOM操作,我们可以灵活地更新页面上的Select列表,从而提高用户体验。 此外,我们还可以通过监听事件,如按钮点击事件,来实现动态添加Option的功能。例如,当用户点击一个按钮时,弹出一个对话框...
var item = $("select[@name=items] option:selected").text(); ``` 这里使用了`option:selected`选择器来选取当前被选中的`<option>`元素,并通过`.text()`获取其文本内容。 2. **设置默认选中的下拉项**: ``...
### Webdynpro for ABAP中select option 用法 #### 引言 本文将通过一个具体的应用场景来探讨如何在Webdynpro for ABAP中使用Select Options功能。该应用场景涉及展示一个选择屏幕,用户可以在其中输入航空公司的ID...
在网页开发中,`<select>`元素用于创建下拉列表,而`<option>`标签则定义了下拉列表中的选项。有时候,我们可能需要在页面加载时预设一个选项为默认选中状态,或者根据用户操作动态改变选中状态。在JavaScript中,这...
Javascript操作Select和Option 一个网页 挺全的
首先,让我们了解JavaScript原生的方法来操作`select`和`option`。通过`document.getElementById('id')`或`document.querySelector('#id')`,你可以获取到对应的`select`元素。一旦有了引用,就可以使用`.options`...
- 方法一:通过id选择器获取select标签,然后使用":selected"伪类选择器找到当前选中的option,接着使用.text()方法获取选中的option的文本内容。代码为`$("#sel option:selected").text();` - 方法二:通过id选择...
javascript 获取select ->option中id、value、label属性及<option></option>中内容
本文将深入探讨如何使用jQuery实现两个`<select>`元素之间的`<option>`选项转移操作,包括全选、单选以及删除功能。 首先,我们需要了解`<select>`和`<option>`的基本概念。`<select>`元素用于创建下拉列表,而`...
在网页开发中,`<select>`元素用于创建下拉列表,常常用于用户选择操作。而动态添加`<option>`是常见的交互设计,特别是在数据量大或者数据需要实时更新的场景中。这篇博客“向<select>元素中动态添加option”探讨的...
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。本篇文章将详细讲解如何使用jQuery来操作select。 首先,`changeShipMethod`...
在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个众所周知的兼容性问题:`<select>`标签内的`<option>`元素无法正确地应用`disabled`属性。这个问题使得开发者无法在IE6中实现禁用某些选项的功能,这对于...
### Select 控件操作大全 #### 一、简介 在网页开发中,`<select>` 元素被广泛用于创建下拉列表,用户可以从中选择一个或多个选项。使用JavaScript可以轻松地操纵这些 `<select>` 控件,从而实现动态地添加、删除...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于...
可能是指使用jQuery来操作`select`元素,例如`$("#***").append('<option><img src="..."></option>')`来添加带有图片的选项。但需要注意的是,原生的`<option>`标签不支持内联HTML,所以图片需要通过CSS背景图或者...