javascript;select动态添加和删除option
<select id="sltCity"></select>
//添加Option。 var optionObj = new Option(text, value); optionObj = new Option(text, value, false, true); //默认选中 document.getElementById("sltCity").options.add(optionObj); //添加Option。 var sltObj = document.getElementById("sltCity"); //获取select对象 var optionObj = document.createElement("option"); //创建option对象 optionObj.value = value; optionObj.innerHTML = text; optionObj.selected = true;//默认选中 sltObj.appendChild(optionObj); //添加到select //删除Option。 var sltCity = document.getElementById("sltCity"); while (sltCity.firstChild) { sltCity.removeChild(sltCity.firstChild); //移除已有的节点 } //动态删除select中的某一项option： document.getElementById("sltCity").options.remove(index);
关于 select 的添加 option 应该注意的问题。
标准的做法如上
也就是说，标准的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下两种方式之一:
1.
s.appendChild(option);
option.text = 'hello world';
option.value =3;
也就是，一定要先添加到 select 中，然后再为 option 赋值。否则在 FF 下是显示正常的，但是在 IE6 中显示的是空白
2. 如果你要讲 option.text 和 option.value 的赋值放在前面，那么请用 option.innerHTML 而不是 option.text
如下:
option.innerHTML = 'hello world';
opion.value = 3;
option.appendChild(option);
3 第三种解决方式。
var op=document.createElement("option"); // 新建OPTION (op)
op.setAttribute("value",0); // 设置OPTION的 VALUE
op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT
select.appendChild(op); // 为SELECT 新建一 OPTION(op)
select.options.length=0; //把select对象的所有option清除掉
select.options.remove(i); //把select对象的第i个option清除掉
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态添加删除option</title>
<script>
//动态删除select中的所有options：
function delAllOptions(){
document.getElementById("user_dm").options.length=0;
}
//动态删除select中的某一项option：
function delOneOption(indx){
document.getElementById("user_dm").options.remove(indx);
}
// 动态添加select中的项option:
function addOneOption(){
//document.getElementById("user_dm").options.add(new Option(2,"mytest"));
var selectObj=document.getElementById("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.getElementById("mySelect");
// 取得字段值
//var strName = document.myForm.myOptionName.value;
// var strValue = document.myForm.myOptionValue.value;
// 建立Option对象
var objOption = new Option("李高灰","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.getElementById("mySelect");
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(){
var objSelect=document.getElementById("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.getElementById("mySelect");
objSelect.options.length=0;
}
</script>
jQuery操作Select
jQuery是如何控制和操作select的。先看下面的html代码
<select id="test"> <option value="1">选项一<option> <option value="2">选项一<option> ... <option value="n">选项N<option> </select>
所谓jQuery操作“select”, 说的更确切一些是应该是jQuery控制 “option”， 看下面的jQuery代码：
//获取第一个option的值
$('#test option:first').val();
//最后一个option的值
$('#test option:last').val();
//获取第二个option的值
$('#test option:eq(1)').val();
//获取选中的值
$('#test').val();
$('#test option:selected').val();
//设置值为2的option为选中状态
$('#test').attr('value','2');
//设置最后一个option为选中
$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());
//获取select的长度
$('#test option').length;
//添加一个option
$("#test").append("<option value='n+1'>第N+1项</option>");
$("<option value='n+1'>第N+1项</option>").appendTo("#test");
//添除选中项
$('#test option:selected').remove();
//删除项选中(这里删除第一项)
$('#test option:first').remove();、
//指定值被删除
$('#test option').each(function(){
if( $(this).val() == '5'){
$(this).remove();
}
});
$('#test option[value=5]').remove();
//获取第一个Group的标签
$('#test optgroup:eq(0)').attr('label');
//获取第二group下面第一个option的值
$('#test optgroup:eq(1) : option:eq(0)').val();
相关推荐
在给定的描述中，我们看到一个与`select`相关的操作，结合`json`技术来动态加载下级内容。这通常涉及到前端开发中的动态数据绑定和交互设计。 首先，`select`元素的基本结构如下： ```html <select> 选项1 选项2...
以上代码展示了JavaScript操作`select`元素的一些常见方法。首先，`jsSelectIsExitItem`函数用于检查`select`中是否存在指定`value`的选项。如果存在，它将返回`true`，否则返回`false`。接着，`jsAddItemToSelect`...
JavaScript 提供了一系列的方法来操作这些`select`元素，包括添加、删除、修改选项，以及获取和设置选中的值、文本和索引。下面我们将详细探讨这些操作： 1. **判断 select 选项中是否存在 Value="paraValue"的 ...
### SIEMENS Multix Select DR 中文操作手册关键知识点 #### 系统安全 - **基本设备**: 在这部分，操作手册介绍了系统的基本组成部分及其安全使用准则。这些包括但不限于探测器系统、平板探测器(FD)、限束器、立式...
本篇文章将详细探讨如何实现键盘操作`select`下拉框，以及相关的技术和最佳实践。 首先，了解基本的HTML `select`元素结构至关重要。一个简单的`select`元素如下所示： ```html <select> ...
以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明： 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现，检查每个选项的`...
SQL 语言—SELECT 更新操作 SQL 语言是关系型数据库管理系统中使用的标准语言，SELECT 语句是 SQL 语言中最基本和最重要的语句之一。SELECT 语句的主要功能是从数据库中检索数据，并显示出来。SELECT 语句可以单独...
本文将详细介绍Select2及其相关文件`select2.min.js`和`select2.min.css`，以及它们如何在项目中发挥重要作用。 Select2是一款强大的JavaScript库，它能够将普通的HTML `<select>`元素转变为功能丰富的选择器。通过...
下拉框相关操作：** ```javascript var cc1 = $(".formc select[name='country'] option[selected]").text(); // 获取选中项文本 var cc2 = $(".formc select[name='country']").val(); // 获取选中项值 var cc3 = ...
除了上述基本操作外，还有一些其他与Select相关的JavaScript操作，如： - **获取选中项的值**：可以通过`selTarget.options[selTarget.selectedIndex].value`获取当前选中的Option的值。 - **设置选中项**：使用`...
例如，当用户点击某行时，根据该行的数据去后台获取相关的下拉选项数据，然后利用`form.render('select')`更新下拉框。 总的来说，LayUI的TableSelect组件是JavaScript开发中的一个强大工具，它简化了在表格中处理...
本文将深入探讨`html:select`标签的使用方法及其相关知识点。 首先，我们需要理解`html:select`标签的基本结构。这个标签通常与`html:option`标签配合使用，以生成下拉列表的选项。一个简单的例子如下： ```jsp ...
1. 引入依赖：确保页面中已经引入了jQuery、Select2和ZTree的相关JS和CSS文件。 2. 初始化Select2：使用Select2的配置选项，设置其为多选模式，并禁用原生的搜索功能，因为我们将在ZTree中实现搜索。 3. 创建ZTree...
使用`form.on('select(filter)', function(data) {...})`方法可以监听到select的选中值变化，并可获取到相关数据。 - `data.elem` 获取select的原始DOM对象。 - `data.value` 获取被选中的值。 #### 查看layui...
分组显示则将相关选项归类，提升用户体验。 在实际应用中，XM-SELECT适用于各种需要多选下拉框的场景，如表单填写、数据筛选、权限管理等。在电商网站的商品属性选择、后台系统的角色权限分配等场景中，都能看到它...
3. **初始化Select2**：使用Select2的JavaScript API初始化`<select>`元素，配置相关选项如宽度、数据源等。在这里，数据源通常是通过Ajax获取，或者预定义一组静态数据。 4. **配置ZTree**：根据ZTree的文档设置...
在本文中，我们将深入探讨`select`的用法，包括如何创建、操作和处理`select`元素的各种事件。 1. **创建基本的`select`元素** ```html <select id="mySelect"> <option value="option1">Option 1 ...
同时，可能还会有各种事件回调，如onSelect、onDeselect等，让开发者可以响应用户的操作。 4. **CSS样式**：既然提到了CSS，我们可以假设库包含了自定义样式的可能性，让开发者可以根据自己的需求调整下拉框的外观...
5. **事件监听**：Select2提供了丰富的事件接口，如`change`、`select`和`unselect`，可以监听并响应用户操作。 **应用场景** Select2广泛应用于各种需要选择操作的场景，如： - 在表单中作为输入组件，提升用户...