JS动态添加与删除select中的Option对象(示例代码)_JavaScript技术应用_网页教学基地
热门关键字：
　 　 　 　 　
JS动态添加与删除select中的Option对象(示例代码)
来源：网页教学基地 时间: 09:00:47&&浏览次数:0
如下所示：复制代码 代码如下://动态删除select中的所有options：&& function delAllOptions(){& &&&&& document.getElementById("user_dm").options.length=0;&& }& //动态删除select中的某一项option：&&& function delOneOption(index){& &&&&& document.getElementById("user_dm").options.remove(index);&& }& // 动态添加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");& }&后使用快捷导航没有帐号？
只需一步，快速开始
查看: 4654|回复: 2
关于清除select中option项选中状态的问题
UID285026在线时间 小时积分1999帖子离线17171 天注册时间
银牌会员, 积分 1999, 距离下一级还需 1001 积分
需要的效果：
点“中国”会自动选中“长春”
然后再点上边的“上海”，清除掉选中的“长春”~
FF正常 IE有问题~
知道怎么回事的朋友帮忙给看看~多谢~
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& xml:lang=&en&&
&meta http-equiv=&content-type& content=&application/xhtml+ charset=gb2312& /&
&title&&/title&
&ul id=&csel&&
&li&&input type=&radio& name=&city& checked=&checked& /&Shanghai 上海&/li&
&li&&input type=&radio& name=&city& /&Guangzhou 广州&/li&
&li&&input type=&radio& name=&city& /&Shenzhen 深圳&/li&
&input type=&radio& name=&city& id=&csela& /&中国&&&&
&select size=&3& id=&cselc&&
&option&Changchun 长春&/option&
&option&Hefei 合肥&/option&
&script type=&text/javascript&&
var csel = document.getElementById(&csel&);
var csela = document.getElementById(&csela&);
var cselc = document.getElementById(&cselc&);
var cselin = csel.getElementsByTagName(&input&);
var cselopc = cselc.getElementsByTagName(&option&);
csela.onclick =
function cityshow()
cselopc[0].selected = true
for(var i = 0; i & cselin. i++)
cselin[i].onclick =
function nosel()
for(var i = 0; i & cselopc. i++)
cselopc[i].selected =
&提示：您可以先修改部分代码再运行
UID222398在线时间 小时积分26396帖子离线17171 天注册时间
cselc.options.selectedIndex =-1;
复制代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& xml:lang=&en&&
&meta http-equiv=&content-type& content=&application/xhtml+ charset=gb2312& /&
&title&&/title&
&ul id=&csel&&
&li&&input type=&radio& name=&city& checked=&checked& /&Shanghai 上海&/li&
&li&&input type=&radio& name=&city& /&Guangzhou 广州&/li&
&li&&input type=&radio& name=&city& /&Shenzhen 深圳&/li&
&input type=&radio& name=&city& id=&csela& /&中国&&&&
&select size=&3& id=&cselc&&
&option&Changchun 长春&/option&
&option&Hefei 合肥&/option&
&script type=&text/javascript&&
var csel = document.getElementById(&csel&);
var csela = document.getElementById(&csela&);
var cselc = document.getElementById(&cselc&);
var cselin = csel.getElementsByTagName(&input&);
var cselopc = cselc.getElementsByTagName(&option&);
csela.onclick =
function cityshow()
cselopc[0].selected = true
for(var i = 0; i & cselin. i++)
cselin[i].onclick =
function nosel()
for(var i = 0; i & cselopc. i++)
cselopc[i].selected =
cselc.options.selectedIndex =-1;
&提示：您可以先修改部分代码再运行
UID285026在线时间 小时积分1999帖子离线17171 天注册时间
银牌会员, 积分 1999, 距离下一级还需 1001 积分
原来可以这样~非常感谢楼上！！
Powered by欢迎光临书村网，书中自有黄金村！书村是一个提供学习,工作的知识内容分享网站。
|||您现在的位置： >
select中添加、修改、删除option元素
编辑：书村网 发布时间:
&!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&&　　
//&Author:&　　
//&Modify:&　　
function&watch_ini(){&//&初始　　
for(var&i=0;&i&arguments.&i++){　　
&&var&oOption=new&Option(arguments[i],arguments[i]);　　
&&document.getElementById(&MySelect&).options[i]=oO　　
function&watch_add(f){&//&增加　　
&&var&oOption=new&Option(f.word.value,f.word.value);　　
&&f.keywords.options[f.keywords.length]=oO　　
function&watch_sel(f){&//&编辑　　
f.word.value&=&f.keywords.options[f.keywords.selectedIndex].　　
function&watch_mod(f){&//&修改　　
f.keywords.options[f.keywords.selectedIndex].text&=&f.word.　　
function&watch_del(f){&//&删除　　
f.keywords.options.remove(f.keywords.selectedIndex);　　
function&watch_set(f){&//&保存　　
var&set&=&&&;　　
for(var&i=0;&i&f.keywords.&i++){　　
set&+=&f.keywords.options[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&　　
☆　ｗｗｗ．mCＱｙY。ｃＯM☆
看了本文的网友还看了
本站发布的作品部分转载于互联网，旨在提供网民阅读参考。若《select中添加、修改、删除option元素》涉及版权问题，或作者不同意本站转载您的作品，请通知我们，收到反馈我们会将相关稿件删除处理。
因为本站编辑人手有限，而部分作文出处也无从考究，所以没注明《select中添加、修改、删除option元素》的出处或转载到本站请您谅解，感谢各位的包容与支持！使用js对select动态添加和删除OPTION
&select id=&ddlResourceType& onchange=&getvalue(this)&&
&&& 动态删除select中的所有options：
&&&&&& document.getElementById(&ddlResourceType&).options.length=0;
&&&& 动态删除select中的某一项option：
&&&&&& document.getElementById(&ddlResourceType&).options.remove(indx);&
&&&& 动态添加select中的项option:
&&&&&& document.getElementById(&ddlResourceType&).options.add(new Option(text,value));
&&&& 上面在IE和FireFox都能测试成功，希望以后你可以用上。
其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。
&&& function getvalue(obj)
&&&&&&& var m=obj.options[obj.selectedIndex].value
&&&&&&& alert(m);//获取value
&&&&&&& var n=obj.options[obj.selectedIndex].text
&&&&&&& alert(n);//获取文本
==============================================================================
1 检测是否有选中
if (objSelect.selectedIndex & - 1 ) {
// 说明选中
// 说明没有选中
2 删除被选中的项
objSelect.options[objSelect.selectedIndex] =
objSelect.options[objSelect.length] = new Option( & 你好 & , & hello & );
4 修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( & 你好 & , & hello & );
5 得到所选择项的文本
objSelect.options[objSelect.selectedIndex].
6 得到所选择项的值
objSelect.options[objSelect.selectedIndex].
======================================================================
&%@LANGUAGE=&VBSCRIPT& CODEPAGE=&936&%&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&JS对select动态添加options操作[IE和FireFox兼容]&/title&
&script language=&javascript& type=&text/javascript&&
function xlbchange(s){
switch (s){
&& case &1& :
&&&&&& document.getElementById(&lb&).options.length=0;
&&&& var soojs_value=[0,1,2,3];
&&& var soojs_text=[&精神提炼&,&作风设计&,&目标设置&,&理念提升&];
&&& for ( var i=0;i&soojs_value.i++){
&&&& var&& oOption&& =&& document.createElement(&OPTION&);&&
&&&& oOption.value=soojs_value[i];&&
&&&& oOption.text=soojs_text[i];&&
&&&& zpmange.lb.options.add(oOption);
&& case &2& :
&&&&&& document.getElementById(&lb&).options.length=0;
&&&& var soojs_value=[0,1,2,3,4,5,6,7];
&&& var soojs_text=[&校徽&,&校训&,&校歌&,&校名字体&,&校史展室&,&宣传画册&,&宣传光盘&,&办公用品纪念品&];
&&& for ( var i=0;i&soojs_value.i++){
&&&& var&& oOption&& =&& document.createElement(&OPTION&);&&
&&&& oOption.value=soojs_value[i];&&
&&&& oOption.text=soojs_text[i];&&
&&&& zpmange.lb.options.add(oOption);
&&&&&&& case &3&:
&&& document.getElementById(&lb&).options.length=0;
&&&& var soojs_value=[0,1,2,3];
&&& var soojs_text=[&校园景观设计&,&校园雕塑设计&,&校园浮雕设计&,&走廊文化设计&];
&&& for ( var i=0;i&soojs_value.i++){
&&&& var&& oOption&& =&& document.createElement(&OPTION&);&&
&&&& oOption.value=soojs_value[i];&&
&&&& oOption.text=soojs_text[i];&&
&&&& zpmange.lb.options.add(oOption);
&&&&&&& case &4&:
&&& document.getElementById(&lb&).options.length=0;
&&&& var soojs_value=[0,1,2];
&&& var soojs_text=[&学校制度&,&文化活动&,&行为规范&];
&&& for ( var i=0;i&soojs_value.i++){
&&&& var&& oOption&& =&& document.createElement(&OPTION&);&&
&&&& oOption.value=soojs_value[i];&&
&&&& oOption.text=soojs_text[i];&&
&&&& zpmange.lb.options.add(oOption);
&& document.getElementById(&lb&).options.length=0;
var&& oOption&& =&& document.createElement(&OPTION&);
&&&& oOption.value=0;&&
&&&& oOption.text=&请选择作品类别&;
zpmange.lb.options.add(oOption);
&form action=&zpmange.& name=&zpmange& method=&post&&
&p&&select id=&ddlResourceType& onchange=&getvalue(this)&&&br /&
&/select&&/p&
&p& 动态删除select中的所有options： &br /&
&&& document.getElementById(&ddlResourceType&).options.length=0; &br /&
&&& 动态删除select中的某一项option： &br /&
&&& document.getElementById(&ddlResourceType&).options.remove(indx); &/p&
&p& 动态添加select中的项option: &br /&
&&& document.getElementById(&ddlResourceType&).options.add(new Option(text,value)); &/p&
&p& 上面在IE和FireFox都能测试成功，希望以后你可以用上。 &br /&
&&& 其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。 &/p&
&p&取值方面&br /&
&&& function getvalue(obj)&br /&
&&& {&br /&
&&& var m=obj.options[obj.selectedIndex].value&br /&
&&& alert(m);//获取value&br /&
&&& var n=obj.options[obj.selectedIndex].text&br /&
&&& alert(n);//获取文本&br /&
&&& }&br /&
&p&例子：&/p&
&table width=&80%& border=&0& align=&center& cellpadding=&1& cellspacing=&1& style=&border-style:double&&
&&&&& &td width=&50%& height=&41& &&div align=&center&&
&&&&&&&&&&& &select name=&xt& id=&xt& onchange=&xlbchange(this.value)&&
&&&&&&&&& &option selected=&selected&&请选择作品&/option&
&&&&&&&&&&&&&&&&& &option value=&1&&理念视别系统&/option&
&&&&&&&&&&&&&&&&& &option value=&2&&视觉识别系统&/option&
&&&&&&&&&&&&&&&&& &option value=&3&&环境视别系统&/option&
&&&&&&&&&&&&&&&&& &option value=&4&&行为视别系统&/option&&&&&&&&&&
&&&&&&& &/select&
&&&&&&&&&&&&&&&
&&&&& &/div&&/td&
&&&&& &td width=&61%& &&div align=&center&&
&&&&&&& &select name=&lb& id=&lb&&
&& &option selected=&selected&&请选择作品类别&/option&
&&&&&&& &/select&
&&&&& &/div&&/td&
&&&&& &td height=&203& colspan=&2& & &/td&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'selectoption 动态添加、删除select得option功能演示整理！（转）_牛宝宝文章网
selectoption动态添加、删除select得option功能演示整理！（转）
动态添加、删除select得option功能演示整理！本次目的为下图：测试了4种，演示2和演示4比较好点。(WwW.NIuBB.NeT)演示2的错误已经修正了演示1：========================================================有两个select1,select2表单，select1已有option,通过两个按钮add1,del2点add1时把select1中选中的项添加到select2中，select1选中项删除点del2时，del2中选中项删除，返回到select1中的原位置谢谢！！---------------------------------------------------------------送给你一个函数，可以在任意个select间增加或者删除option，只要你传递两个参数过去就行了，注意：本函数主要用于多选框：&Select name = Province id = Province size = 7 multiple = true &&option value = 1&山东&/Select&&script language = javascript&/**多选下拉列表动态增加函数：Create(SourseObject,TargetObject)；*参数:SourseObject:表示要动态添加的源Select；*参数:TargetObject:表示要动态接受的目的Select；*例:Create(document.all.SourSelect,document.all.TarSelect);*作者:月影飞鸿 于 晚作*/function Create(SourceSelect,TargetSelect){var IsCreate =var theIndex = SourceSelect.selectedIvar theLength = SourceSelect.if (theIndex == -1 ) //如果源Select为空的话，则退出过程while (IsCreate) //添加到目的Select循环{theValue = SourceSelect.options[theIndex]. //得到所选择的文本TargetSelect.options.add(new Option(theValue)); //目的Select增加一个文本theIndex = theIndex + 1; //如果是选择多列的话，对下一个进行处理if (theIndex == theLength) //theLength 如果是4的话，则theIndex应该是3，{ //如果两者想等的话，则源Select多了一个值，IsCreate = //所以需要退出循环}if (SourceSelect.options[theIndex].selected == false)//如果没有被选择的话，则退出循环{IsCreate =}}while (IsCreate == false) //删除源select循环{SecIndex = SourceSelect.selectedI //动态得到被选择的索引theLength = SourceSelect. //动态得到Select的长度SourceSelect.remove(SecIndex); //删除指定索引的元素if (theLength == 1) //表示最后一个元素已删除， //源select空了，退出循环if (theLength == SecIndex + 1) //表示多选的已全部删掉，退出循环if (SourceSelect.options[SecIndex].selected == false){IsCreate =}}}&/script&演示二：==============================================================&html&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312"&&title&Power by 31u.net&/title&&script language="javascript"&&!--function Add(ObjSource,ObjTarget){for(var i=0;i&ObjSource.i++){if(ObjSource.options[i].selected){var opt=document.createElement("OPTION");opt.value=ObjSource.options[i].opt.text=ObjSource.options[i].ObjTarget.add(opt);ObjSource.options.removeChild(ObjSource.options[i--]);opt.selected=}}}function AddAll(ObjSource,ObjTarget){SelectAll(ObjSource);Add(ObjSource,ObjTarget);}function SelectAll(ObjSource){for(var i=0;i&ObjSource.i++){ObjSource.options.selected=}}function doSubmit(){SelectAll(frmDisplay.dltTarget);//frmDisplay.action="";//设置form 提交的actionalert(frmDisplay.action);//frmDisplay.submit();//取消注释即可,提交上去的options}//-&&/script&&/head&&body&&table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0"&&tr&&td width="150"&&select name="dltSource" size="10" multiple style="width:100% "&&option value="0"&辽宁&/option&&option value="0"&黑龙江&/option&&option value="0"&吉林&/option&&option value="0"&河北&/option&&option value="0"&河南&/option&&option value="0"&江苏&/option&&option value="0"&浙江&/option&&option value="0"&海南&/option&&option value="0"&福建&/option&&option value="0"&山东&/option&&option value="0"&青海&/option&&option value="0"&宁夏&/option&&option value="0"&内蒙古&/option&&option value="0"&新疆&/option&&option value="0"&陕西&/option&&/select&&/td&&td width="50" valign="middle"&&p style="width:100%" align="center"&&input type="button" value="添加" onClick="Add(document.all.dltSource,frmDisplay.dltTarget)" title="添加"&&/p&欢迎您转载分享：}