删除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>
详情请见附件
分享到:
相关推荐
一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等.....<script src="js/mobileSelect.js" type="text/javascript"></script>
多选框要用到的js multiple-Select.js 用的时候引用到文件中
下拉框的表单美化插件,mSelect.js源代码,mSelect 是一个含有漂亮下拉框、漂亮按钮的表单美化插件,支持下拉框的滑动展开、折叠,原下拉的onchange事件,selected/disabled属性,支持上下键选择,支持表单的reset,...
配合文章使用
LayUi组件:TableSelect
这个文档是本人在开发学习中下的别人的资料,觉得汇总的很好,后面在工作过程中修改了一些,非常有用,尤其是前端的,基本上对select option的操作都在这里面了。有收藏价值。
Selecto.js Selecto.js是允许您使用鼠标或触摸在拖动区域中选择元素的组件。 / / :gear_selector: 安装 npm $ npm install selecto 剧本 < script src =" //daybrush....
使用多选下拉框的用到
select2的新版中文语言包。下载后直接引入即可。放在select2.full.min.js后引入语言包。在代码里加入 language: "zh-CN"即可。
js ySelect插件,简单实用的jQuery多选插件ySelect.js,支持反选,搜索,分组。
select2最新版本js、css,里面包含最全js、css,保证安全可用
layui第三方插件xm-select,layui index.html文件中引入xm-select.js即可实现下拉多选框功能效果
【下一章】 【索引】 【这是目录】 ---------------------------------------...netscape.javascript.JSObject 方法和静态方法 netscape.javascript.JSException 构造函数 netscape.plugin.Plugin 构造函数和方法
jquery.editable-select插件
内含: JavaScript语言参考手册.pdf (主要资源) 另外附上: ...netscape.javascript.JSObject 方法和静态方法 netscape.javascript.JSException 构造函数 netscape.plugin.Plugin 构造函数和方法 索引
layui下拉树级列表,有pid模拟数据,下载后可以直接运行使用,基于layui前端框架本人亲测可正常使用
此压缩包内含有select2.min.css、select2.min.js和jquery-1.9.1.min.js,在使用Select2 ajax时使用方便,谢谢下载!
绝对的经典javascript收藏 包含了各个种类的js校验实例 web开发绝妙帮手 <br>javascript收藏 1.页面校验 1.文本框约束输入 2.表单校验工具库 3.文本框部分内容不让改变 2.下拉框类 ...
JavaScript实现select功能代码