删除select中的所有OPTION
document.getElementByIdx("select的ID").options.length = 0;
为select添加一个option
document.getElementByIdx("select的ID").options.add(new Option(text,value));
移除一个指定的OPTION
document.getElementByIdx("select的ID").remove(i);
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=0;
}
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);
}
整个实例的完整代码如下：
<!doctype html public "-//w3c//dtd html 4.01//zh-cn" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<head>
<script language=javascript>
function $(id)
{
return document.getelementbyid(id)
}
function show()
{
var selectobj=$("area")
var myoption=document.createelement("option")
myoption.setattribute("value","10")
myoption.appendchild(document.createtextnode("上海"))
var myoption1=document.createelement("option")
myoption1.setattribute("value","100")
myoption1.appendchild(document.createtextnode("南京"))
selectobj.appendchild(myoption)
selectobj.appendchild(myoption1)
}
function choice()
{
var index=$("area").selectedindex;
var val=$("area").options[index].getattribute("value")
if(val==10)
{
var i=$("context").childnodes.length-1;
var remobj=$("context").childnodes[i];
remobj.removenode(true)
var sh=document.createelement("select")
sh.add(new option("浦东新区","101"))
sh.add(new option("黄浦区","102"))
sh.add(new option("徐汇区","103"))
sh.add(new option("普陀区","104"))
$("context").appendchild(sh)
}
if(val==100)
{
var i=$("context").childnodes.length-1;
var remobj=$("context").childnodes[i];
remobj.removenode(true)
var nj=document.createelement("select")
nj.add(new option("玄武区","201"))
nj.add(new option("白下区","202"))
nj.add(new option("下关区","203"))
nj.add(new option("栖霞区","204"))
$("context").appendchild(nj)
}
}
function calc()
{
var x=$("context").childnodes.length-1;
alert(x)
}
function remove()
{
var i=$("context").childnodes.length-1;
var remobj=$("context").childnodes[i];
remobj.removenode(true)
}
</script>
<body>
<div id="context">
<select id="area" onchange="choice()">
</select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="计较结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>
改良版：在select中添加、点窜、删除option元素
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var word = document.createelement("option");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增添
var word = document.createelement("option");
word.text = f.word.value;
f.keywords.add(word);
}
但上述 add() 方式只在ie下有用，为兼容ff和opera，对上述代码进行了一下改良，改动儿女码如下： function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var ooption=new option(arguments[i],arguments[i]);
document.getelementbyid("myselect")[i]=ooption;
}
}
function watch_add(f){ // 增添
var ooption=new option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=ooption;
}
整个实例的完整代码如下：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var ooption=new option(arguments[i],arguments[i]);
document.getelementbyid("myselect")[i]=ooption;
}
}
function watch_add(f){ // 增添
var ooption=new option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=ooption;
}
function watch_sel(f){ // 编纂
f.word.value = f.keywords[f.keywords.selectedindex].text;
}
function watch_mod(f){ // 点窜
f.keywords[f.keywords.selectedindex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedindex);
}
function watch_set(f){ // 保留
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="myselect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关头词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增添" onclick="watch_add(this.form);" />
<input type="button" value="点窜" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保留" onclick="watch_set(this.form);" />
</form>
用一个字符串建立一个数组方式:
<script language="javascript">
>
</body>
</html>
<script>
function spli(){
datastr="2,2,3,5,6,6";
var str= new array();
str=datastr.split(",");
for (i=0;i<str.length ;i++ )
{ document.write(str[i]+"<br/>"); }
}
spli();
</script>
详情请见附件
分享到：
相关推荐
本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`元素，包括但不限于取值、设置选中状态等常见操作。 #### 二、基础知识回顾 在开始深入讲解之前，我们先回顾一下`<select>`的基本结构： ```html ...
### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中，`<select>` 元素是一种常见的表单控件，用于收集用户输入的选择项。它通常包含多个 `<option>` 子元素供用户选择。通过 JavaScript，我们可以实现...
本文档提供了详细的JavaScript操作`<select>`元素的方法，包括判断选项是否被选中、增删改选项及其属性等实用功能。下面将详细介绍这些方法。 #### 一、判断是否选中 **功能描述：** 判断指定值的`<option>`元素...
一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等.....<script src="js/mobileSelect.js" type="text/javascript"></script>
本文将详细介绍Select2及其相关文件`select2.min.js`和`select2.min.css`，以及它们如何在项目中发挥重要作用。 Select2是一款强大的JavaScript库，它能够将普通的HTML `<select>`元素转变为功能丰富的选择器。通过...
通过阅读中文文档，开发者能够了解如何配置、初始化、操作树以及利用各种插件来增强功能。无论是新手还是经验丰富的开发者，jsTree 都能提供足够灵活的工具来满足项目需求。深入学习并熟练运用jsTree，将有助于提升...
select2.min.js插件！！！=
SelectPage.js下拉分页选择插件界面简洁，支持下拉，分页，键盘操作等功能。它的特点还有：插件基于jQuery开发，可在Bootstrap2、3环境下使用，亦可在原生无UI框架的环境下直接使用。 兼容Bootstrap2、3样式，以及非...
select2.min.js
D3.js的核心功能主要集中在对DOM的操作、数据处理以及可视化图表的生成等方面。通过D3.js，开发者能够灵活地操控DOM元素，并结合数据动态生成各种图表。 #### 选择集 选择集是D3.js中最基本也是最重要的概念之一，...
2. **初始化插件**：在文档加载完成后，通过JavaScript调用`tastySelect()`函数对Select元素进行初始化，例如：`document.getElementById('mySelect').tastySelect();` 3. **自定义配置**：如果需要，可以通过参数...
以上是JavaScript操作`<select>`标签的一些基本方法。在实际开发中，这些功能可能会作为更复杂交互的基础，例如动态加载数据、响应用户事件等。了解并熟练掌握这些操作，对于提升网页的交互性和用户体验至关重要。
多选框要用到的js multiple-Select.js 用的时候引用到文件中
总的来说，LayUI的TableSelect组件是JavaScript开发中的一个强大工具，它简化了在表格中处理选择操作的复杂性，提供了丰富的交互功能。开发者可以根据项目需求灵活定制，实现各种复杂的数据管理场景。
- **API方法**：如`jstree('select_node')`选择节点，`jstree('rename_node')`重命名节点，`jstree('get_json')`获取当前树的JSON表示。 - **事件**：jsTree提供了丰富的事件，如`select_node.jstree`在节点被选中...
### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时，经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能： ```javascript ...
在IT行业中，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。...通过学习这篇博客和提供的文件，开发者可以深化对jQuery操作select的理解，提升开发水平。
首先，让我们了解JavaScript原生的方法来操作`select`和`option`。通过`document.getElementById('id')`或`document.querySelector('#id')`，你可以获取到对应的`select`元素。一旦有了引用，就可以使用`.options`...