使用js对select动态添加和删除OPTION - Javascript教程_JS教程_技术文章 - 红黑联盟
使用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&jquery改变select样式|Select样式美化 - 源码爱好者下载
您的当前位置：
jquery改变select样式，jQuery.SelectBox.js例子|Select样式美化
jQuery.SelectBox.js例子，jquery改变select样式，也就是美化一下Select框，与默认的灰色选框相比，现在的样式确实漂亮多了，感觉挺好的一个范例。
运行环境：HTML/PHP/ASP/ASP.NET/JSP...
相关标签：
软件大小：35.0K
软件属性：共享版 | 简体中文
软件评级：
收录更新： |
相关链接：暂无演示
软件截图：
下载地址：多个select标签需要被同一个JS函数调用，怎么知道选中的是哪一个select标签？？_百度知道
多个select标签需要被同一个JS函数调用，怎么知道选中的是哪一个select标签？？
baidu.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><a href="http如果一个HTML页面里有多个select标签当点击JS事件时如何区分点击的是哪个select标签<a href="/zhidao/wh%3D450%2C600/sign=356d527f6baaec950a7b0fa26f4d3572c10dfcfd7./zhidao/wh%3D450%2C600/sign=46a071af332ac65c67506e77cec29e27/9f2f4c086f06f0e3.jpg" esrc="/zhidao/pic/item/1c950a7b0fa26f4d3572c10dfcfd7.baidu:///zhidao/wh%3D600%2C800/sign=69e9ae2cd339bb1df2f4c086f06f0e3./zhidao/pic/item/9f2f4c086f06f0e3://e.hiphotos://e://f
提问者采纳
...;change()&;/修改成.....;option&gt...value.。有两种方法..;onchange(this)&quot，连最基本的this你都不会用啊;&#47。如下;&#47.getAttribute(&#39：function change(obj){
&#47...; var res=把当前dom的对象引用传给方法.;);).}如果还想取select的id值...getElementById(&#39;&#47.。onchange改成如下声明;这一句修改成如下;&#47..;&#47...。只需把现有的select上的onchange=&quot..id.;&#47.id&#39..;&#47.;&gt：
var res =text&#39;option value=&#39：
&把你的select中的option都加上value属性.：onchange=&quot..：var selectId = obj.;s1&#39;或者var selectId = obj看样子你对js不是很很熟练啊.;&lt
是的，我的确不太熟悉JS，但是我想学学，谢谢你的解答
提问者评价
来自团队：
其他类似问题
为您推荐：
其他2条回答
onchange=&change($(this))&var change = function(dom){
dom.val()}
请问是怎么取select里的值呢？我这样alert()不出任何东西。var change = function(dom){
alert(dom.val());
你的option写了value属性么？？？没有的话就没有，我只是给个例子，引水作用，你自己应该知道怎么写了，采纳即可
看你定义了不同的ID，可以取他们的ID区别$(&select&).click(function(){
alert(&选中的下拉框ID为：&+$(this).attr(&id&));});
类似这样写？ $(&select&).click(function(){
alert(&选中的下拉框ID为：&+$(this).attr(&s1&));
});请问这样是取出它的id的值吗？如果我想取select的选中值呢？而且我这样去不到select的id？
你那样当然取不到 id ，$(this).attr(&id&));这样才能取到id，你要取选中的值的话，这样$(&select option&).click(function(){
alert($(this).val());
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁求教各位同学，如何用js在不点击&select&下拉框时让他展开_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：66,548贴子：
求教各位同学，如何用js在不点击&select&下拉框时让他展开收藏
等同于点击下拉框，然后弹出值得效果。现在用js来实现这个点击的事件，求实现方法
自己写插件吧，模拟个select
嗯，楼上说的对，直接写个div列表藏文字，用event直激话它像下拉框就行了。如何？
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口