<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下拉菜单特效
以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明: 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现,检查每个选项的`...
这篇博客“js控制 select表单子节点左右上下移动”提供了一个解决方案,它可能包含了一个名为`optionSelect.js`的脚本文件,用于实现这个功能。 首先,我们需要理解`select`元素和它的`option`子元素。在HTML中,`...
在HTML和JavaScript编程中,`<select>`元素...通过以上方法,我们可以灵活地控制HTML中的`<select>`元素,满足各种交互需求。在实际开发中,还可以结合AJAX等技术,实现与服务器的动态数据交互,进一步增强用户体验。
### Js操作Select大全知识点详解 #### 一、概述 JavaScript(简称JS)是网页开发中不可或缺的一部分,尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`...
在网页设计中,Select下拉框作为数据选择的常见元素,其样式通常由浏览器默认控制,这往往不符合现代网页设计的美观需求。为了解决这个问题,开发者们创造了各种各样的插件,其中`tastySelect`就是一款专门用于美化...
在这个场景中,JavaScript可以创建一个自定义的下拉菜单,模仿`<select>`的功能,同时允许我们完全控制其样式。例如,可以使用JavaScript监听`<select>`元素的事件,如`change`,并在用户做出选择时更新自定义菜单的...
在现代网页设计中,select下拉列表是实现用户交互的一项基本元素,但在不同的浏览器中,其样式表现差异较大,且在自定义样式方面存在限制,尤其是无法完全通过CSS控制其外观。随着Web标准的推进,浏览器厂商对HTML...
使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何通过JavaScript来操作`<select>`元素。 #### 1. 判断Select中是否存在特定值的选项 ```javascript function ...
标题"select2js,css和中文包"表明我们关注的是一个名为Select2的JavaScript库,它涉及到CSS样式以及中文语言支持。Select2是一个强大的、可定制的下拉选择框替代方案,它提供了多选、单选以及输入匹配的功能。 ...
在JavaScript中,我们可以使用DOM操作来获取并控制这个元素。例如,使用`document.getElementById`方法获取`<select>`元素: ```javascript var selectElement = document.getElementById('mySelect'); ``` 要模拟...
在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...
### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中,有时我们需要对浏览器原生的`<select>`元素进行定制化处理,比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...
以上代码展示了JavaScript操作`select`元素的一些常见方法。首先,`jsSelectIsExitItem`函数用于检查`select`中是否存在指定`value`的选项。如果存在,它将返回`true`,否则返回`false`。接着,`jsAddItemToSelect`...
在JavaScript中,`<select>`...通过这些知识点,开发者可以有效地利用JavaScript动态控制下拉列表,实现交互式网页应用中的功能,比如动态加载数据、根据条件显示或隐藏选项等。在实际项目中,这些技巧非常实用且常见。
总的来说,仿select菜单是前端开发中常见的需求,它结合了JavaScript的动态性和CSS的灵活性,为用户提供了一个既美观又实用的选择方式。在实际项目中,开发者可以根据需求选择使用现成的库如Select2,或者自己编写...
综上所述,EL、JSTL和JavaScript共同为`<select>`元素提供了强大的功能,使得在Web应用中构建动态、交互式的下拉菜单成为可能。开发者可以根据需求灵活选择使用这些技术来优化用户体验。在实际项目中,常常会结合...
为了改善这一情况,开发者们通常会利用JavaScript(JS)和层叠样式表(CSS)来增强Select的视觉效果,创建出更加精美、自定义的选项框插件。本文将深入探讨如何使用JS和CSS来美化经典Select选项框。 首先,我们需要...
`hselect` 就是为了解决这个问题,它提供了一种方式,让我们能够通过JavaScript来控制这些无形的伪元素,从而实现更复杂的动态效果和交互。 `hselect` 的核心功能在于其能够创建一个JavaScript对象,该对象可以绑定...