`
晨星★~雨泪
  • 浏览: 447350 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js 控制 select

阅读更多
<select id="ddlResourceType" onchange="getvalue(this)">
</select>

   动态删除select中的所有options:
       document.getElementById("ddlResourceType").options.length=0;

     动态删除select中的某一项option:
       document.getElementById("ddlResourceType").options.remove(indx); 
//就是这句不兼容了,Firefox是不懂 remove 这个方法的,所以会报错了,当然也移除不了了

    动态添加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);//获取文本
     }


后来,发现这篇文章末端的那几句话,觉得可以用dom试试,嗯,果然可行.

var sObj=document.getElementById("ddlResourceType");

sObj.removeChild(sObj.options[indx]);

这样,上面这句就做到兼容了.




[html]
<select id="mysel" name="mysel">
  <option value="1">1 xxxxxxxxxx</option>
  <option value="2">2 yyyyyyyyyy</option>
  <option value="3">3 zzzzzzzzzz</option>
  <option value="4">4 wwwwwwwwww</option>
</select>
<button onclick="setSel(3)">设置第3项为选中项</button>
<button onclick="clearSel()">清空选择框</button>
<button onclick="fillSel()">填充选择框</button>
<button onclick="removeSel()">移除第一项</button>
<button onclick="editSel()">修改第一项</button>

<script type="text/javascript">
    function setSel(str){
        with(document.all){   
            for(var i=0;i<mysel.options.length;i++){               
                if (mysel.options[i].value==str){
                    mysel.selectedIndex=i;
                    break;
                }
            }           
        }
    }


    function clearSel(){
        with(document.all){   
            mysel.options.length=0;
        }
    }

    function fillSel(){
        with(document.all){
            mysel.options.length=0;
            mysel.options[0] = new Option("1 xxxxxxxxxx","1");
            mysel.options[1] = new Option("2 yyyyyyyyyy","2");
            mysel.options[2] = new Option("3 zzzzzzzzzz","3");
            mysel.options[3] = new Option("4 wwwwwwwwww","4");
            mysel.options[4] = new Option("5 aaaaaaaaaa","5");

            mysel.selectedIndex = 4;
        }
    }

    function removeSel(){
        with(document.all){
            mysel.remove(0);
            if (mysel.options.length>0){
                mysel.selectedIndex=0;
            }
        }
    }

    function editSel(){
        with(document.all){
            if (mysel.options.length>0){
                mysel.options[0] = new Option("这是新的第一项","new Value")
                mysel.selectedIndex=0;
            }
        }
    }
</script>

[/html]

注:所有内容都从网上收集
分享到:
评论

相关推荐

    js控制select选中显示不同表单内容select下拉菜单特效

    js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效

    js控制select相关方法

    以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明: 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现,检查每个选项的`...

    js控制 select表单子节点左右上下移动

    这篇博客“js控制 select表单子节点左右上下移动”提供了一个解决方案,它可能包含了一个名为`optionSelect.js`的脚本文件,用于实现这个功能。 首先,我们需要理解`select`元素和它的`option`子元素。在HTML中,`...

    html js 清除select里的值,js控制select增删改,选中,清空, 判断控件是否存在

    在HTML和JavaScript编程中,`&lt;select&gt;`元素...通过以上方法,我们可以灵活地控制HTML中的`&lt;select&gt;`元素,满足各种交互需求。在实际开发中,还可以结合AJAX等技术,实现与服务器的动态数据交互,进一步增强用户体验。

    Js操作Select大全(取值、设置选中等等)

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript(简称JS)是网页开发中不可或缺的一部分,尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`...

    纯js超酷select下拉框美化插件

    在网页设计中,Select下拉框作为数据选择的常见元素,其样式通常由浏览器默认控制,这往往不符合现代网页设计的美观需求。为了解决这个问题,开发者们创造了各种各样的插件,其中`tastySelect`就是一款专门用于美化...

    js+css美化select,简单易用代码少,可以自己控制样式

    在这个场景中,JavaScript可以创建一个自定义的下拉菜单,模仿`&lt;select&gt;`的功能,同时允许我们完全控制其样式。例如,可以使用JavaScript监听`&lt;select&gt;`元素的事件,如`change`,并在用户做出选择时更新自定义菜单的...

    用JavaScript来美化HTML的select标签的下拉列表效果

    在现代网页设计中,select下拉列表是实现用户交互的一项基本元素,但在不同的浏览器中,其样式表现差异较大,且在自定义样式方面存在限制,尤其是无法完全通过CSS控制其外观。随着Web标准的推进,浏览器厂商对HTML...

    javascript 操作表单select的常用步骤

    使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何通过JavaScript来操作`&lt;select&gt;`元素。 #### 1. 判断Select中是否存在特定值的选项 ```javascript function ...

    select2js,css和中文包

    标题"select2js,css和中文包"表明我们关注的是一个名为Select2的JavaScript库,它涉及到CSS样式以及中文语言支持。Select2是一个强大的、可定制的下拉选择框替代方案,它提供了多选、单选以及输入匹配的功能。 ...

    js模拟点击select下拉菜单列表代码

    在JavaScript中,我们可以使用DOM操作来获取并控制这个元素。例如,使用`document.getElementById`方法获取`&lt;select&gt;`元素: ```javascript var selectElement = document.getElementById('mySelect'); ``` 要模拟...

    js实现动态生成select中的option

    在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...

    JavaScript模拟select

    ### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中,有时我们需要对浏览器原生的`&lt;select&gt;`元素进行定制化处理,比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...

    js操作select相关方法

    以上代码展示了JavaScript操作`select`元素的一些常见方法。首先,`jsSelectIsExitItem`函数用于检查`select`中是否存在指定`value`的选项。如果存在,它将返回`true`,否则返回`false`。接着,`jsAddItemToSelect`...

    javascript操作Select标记中options集合

    在JavaScript中,`&lt;select&gt;`...通过这些知识点,开发者可以有效地利用JavaScript动态控制下拉列表,实现交互式网页应用中的功能,比如动态加载数据、根据条件显示或隐藏选项等。在实际项目中,这些技巧非常实用且常见。

    仿select 菜单,JS下拉菜单

    总的来说,仿select菜单是前端开发中常见的需求,它结合了JavaScript的动态性和CSS的灵活性,为用户提供了一个既美观又实用的选择方式。在实际项目中,开发者可以根据需求选择使用现成的库如Select2,或者自己编写...

    EL,jstl,js 对select元素

    综上所述,EL、JSTL和JavaScript共同为`&lt;select&gt;`元素提供了强大的功能,使得在Web应用中构建动态、交互式的下拉菜单成为可能。开发者可以根据需求灵活选择使用这些技术来优化用户体验。在实际项目中,常常会结合...

    JS+CSS美化经典Select选项框插件

    为了改善这一情况,开发者们通常会利用JavaScript(JS)和层叠样式表(CSS)来增强Select的视觉效果,创建出更加精美、自定义的选项框插件。本文将深入探讨如何使用JS和CSS来美化经典Select选项框。 首先,我们需要...

    hselect是一个用来通过js修改伪元素css值的小工具

    `hselect` 就是为了解决这个问题,它提供了一种方式,让我们能够通过JavaScript来控制这些无形的伪元素,从而实现更复杂的动态效果和交互。 `hselect` 的核心功能在于其能够创建一个JavaScript对象,该对象可以绑定...

Global site tag (gtag.js) - Google Analytics