zisetoufa
- 浏览: 313670 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
如果这就是爱情：
有相应的CSS和JS代码吗?
div+css js按钮特效 鼠标移上去显示子菜单 -
awaterway：
正好要用。哈哈哈哈。。
java调用window的cmd的ping指令 -
一江山：
...
Eclipse 项目有红感叹号 -
autorun：
...
Eclipse 项目有红感叹号 -
本色是本色：
试了 好像不行哦
form表单中enctype="multipart/form-data"的意思
注意:Option中的O是要大写的，不然语法报错
1.动态创建select
Javascript代码
function createSelect(){
Select = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加选项option
Javascript代码
function addOption(){
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
----------------------------------------------------------------
Option里面的四个参数分别的意思
new Option (text,value,defaultselected,selected)
new Option (文本,值,默认选中的选项,选中的选项)
看测试结果就懂了
<select id="s1"></select>
<script>
var op = new Option("显示文本1","值1",false,false);
s1.options.add(op);
op = new Option("显示文本2","值2",false,true);
s1.options.add(op);
</script>
-----------------------------------------------------------------
3.删除所有选项option
Javascript代码
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
Javascript代码
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.获得选项option的值
Javascript代码
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
Javascript代码
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
Javascript代码
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
Javascript代码
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
整个实例的完整代码如下：
Javascript代码
<!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元素
Javascript代码
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(){ // 初始
Javascript代码
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;
}
整个实例的完整代码如下：
Javascript代码
<!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>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/yefengzhixia/archive/2009/04/17/4087284.aspx
1.动态创建select
Javascript代码
function createSelect(){
Select = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加选项option
Javascript代码
function addOption(){
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
----------------------------------------------------------------
Option里面的四个参数分别的意思
new Option (text,value,defaultselected,selected)
new Option (文本,值,默认选中的选项,选中的选项)
看测试结果就懂了
<select id="s1"></select>
<script>
var op = new Option("显示文本1","值1",false,false);
s1.options.add(op);
op = new Option("显示文本2","值2",false,true);
s1.options.add(op);
</script>
-----------------------------------------------------------------
3.删除所有选项option
Javascript代码
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
Javascript代码
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.获得选项option的值
Javascript代码
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
Javascript代码
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
Javascript代码
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
Javascript代码
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
整个实例的完整代码如下：
Javascript代码
<!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元素
Javascript代码
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(){ // 初始
Javascript代码
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;
}
整个实例的完整代码如下：
Javascript代码
<!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>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/yefengzhixia/archive/2009/04/17/4087284.aspx
分享到：
发表评论
-
java 解析xml格式的字符串
2016-08-03 09:25 896网上有好多种解析xml格式的字符串方式，在此记录下自己用的一种 ... -
微信扫码支付 返回签名错误
2016-06-29 09:46 2810做微信扫码支付时，返回签名错误，在网上搜各种解决方法，都试过了 ... -
js将json数组对象属性的date显示出来
2016-06-28 11:39 709java里面时间类型转换成json数据就成这样了 " ... -
java中在获取的系统时间上推迟一周,或者一年
2015-11-20 14:00 866推迟一周： Calendar curr = Calendar. ... -
select 由左边框移动到右边示例
2015-05-05 15:46 712<script type="text/java ... -
(转)eclipse启动无响应，停留在Loading workbench状态
2015-04-13 10:31 738做开发的同学们或多或少的都会遇到eclipse启动到一定程度时 ... -
jQuery ajax级联二级菜单(转)
2014-10-15 16:33 807默认查出一级分类的第一条数据，和一级分类第一条对应的二级分类条 ... -
js 操作select的option
2014-04-09 14:21 981注意:Option中的O是要大写的，不然语法报错 1. ... -
在jsp页面获取后台json数据
2014-01-03 17:57 9438后台传过来的是一个JsonArray数组 var a = [ ... -
用js动态改变css样式表
2013-08-13 10:36 3705用setAttribute方法实现一个页面两份样式表的效果，具 ... -
＜meta http-equiv=名称 content=值＞
2013-04-27 16:36 1087meta是html语言head区的一个辅助性标签。几乎所有的网 ... -
JAVA 解决获取空格路径问题
2013-04-15 14:44 1053ReadProperties read = new ReadP ... -
java读取配置文件的几种方法
2013-04-15 12:15 842一.读取xml配置文件 package chb.demo.vo ... -
java读取properties配置文件
2013-04-15 12:07 916try { File directory = new ... -
JAVA解析XML格式字符串
2013-04-12 17:21 4066import org.jdom.Document; impo ... -
java如何做到判断一个字符串是否是数字
2013-04-12 11:25 1052public class NumberDemo { pub ... -
ajax提交并根据返回的值重写标签
2013-04-12 11:09 1495Jsp: function saveCalendar(id) ... -
EL表达式截取字符串
2013-04-12 11:06 933<%@ taglib prefix="fn&q ... -
网页JS弹出广告代码
2013-04-08 11:45 4100借鉴：网页JS弹出广告代码，头部，右下角，网页中漂浮，对联广告 ... -
HTML页面宽度自适应
2013-03-28 10:36 6396<meta name="viewport&qu ...
相关推荐
js 操作select和optionjs 操作select和option
select option 自定义图片的js 、css 以及代码展示，javaScript ；
Javascript操作Select和Option 一个网页 挺全的
jquery获得select option值
本人写的一个html页面，用js实现从数组读数据自动生成select控件
这个文档是本人在开发学习中下的别人的资料，觉得汇总的很好，后面在工作过程中修改了一些，非常有用，尤其是前端的，基本上对select option的操作都在这里面了。有收藏价值。
简单的例子，点击按钮就删除掉option，也可以通过jquery加载的时候进行删除。
javascript 获取select ->option中id、value、label属性及<option></option>中内容
1 检测是否有选中 2.动态创建select 3.添加选项option 4.删除所有选项option 5.删除一个选项option 6.获得选项option的值......
1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...
用js操作select的option，可以增加删除和判断value值是否在下拉列表存在
两个下拉列表，用JS动态添加Select中的Option元素值
主要介绍了JS实现select选中option触发事件操作,结合实例形式总结分析了javascript针对select下拉选中option项触发事件相关操作技巧,需要的朋友可以参考下
主要介绍了JS更改select内option属性的方法,涉及JavaScript动态操作页面select元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
静态二级联动 js 调取数据 带有 option 值
select-option-disabled-emulation.js解决IE6 Select 中 option 的disabled属性无效的办法～～～在页面加载时架子该js，呵呵有点问题：onchange 时间冲突 自己改改··
NULL 博文链接：https://self4j.iteye.com/blog/842276
js函数方法： 代码如下: [removed] function getDefaultSelectedOption(selectId, valIfNull) { var dom, selectId = selectId.replace(/^#/, ”), opts; try { opts = document.getElementById(selectId)....
<option value=”1″>one</option> <option value=”2″>two</option> <option value=”3″>three</option> </select> 则可通过以下script代码s来获取选中的value和text 代码如下: $(“#mySelect”).val(); /...