`
lxc914_java
  • 浏览: 57490 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS动态改变select的值

阅读更多
document.getElementById("louyuming").options[0].selected=true;
function jsSelectIsExitItem(objSelect, objItemValue) {       
     var isExit = false;       
     for (var i = 0; i < objSelect.options.length; i++) {       
         if (objSelect.options[i].value == objItemValue) {       
             isExit = true;       
             break;       
         }       
     }       
     return isExit;       
}       
Javascript 操作select是表单中常见的一种,今天删除多个select值的时候出现了问题,搞了半天原来是索引引起的(即删除的时候要从索引大的开始删,然后再删除索引小的,否则删除了索引小的后索引大的索引就变化了,再删除时就会出现问题--问题的关键是for循环是要从大到小,而不是常规的从0到 length)
// 4.删除select中选中的项   
function jsRemoveSelectedItemFromSelect(objSelect) {       
     var length = objSelect.options.length - 1;   
     for(var i = length; i >= 0; i--){   
         if(objSelect[i].selected == true){   
             objSelect.options[i] = null;   
         }   
     }   
}     
1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项
======================================================================
动态删除select中的所有options:
function deleteAllOptions(sel){
sel.options.length=0;
}
动态删除select中的某一项option:
function deleteOption(sel,indx){
sel.options.remove(indx);
}
动态添加select中的项option:
function addOption(sel,text,value){
sel.options.add(new Option(text,value));
}
上面在IE和FireFox都能测试成功,希望以后可以用上。
===========================================
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item       
function jsSelectIsExitItem(objSelect, objItemValue) {       
     var isExit = false;       
     for (var i = 0; i < objSelect.options.length; i++) {       
         if (objSelect.options[i].value == objItemValue) {       
             isExit = true;       
             break;       
         }       
     }       
     return isExit;       
}        
  
// 2.向select选项中 加入一个Item       
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {       
     //判断是否存在       
     if (jsSelectIsExitItem(objSelect, objItemValue)) {       
         alert("该Item的Value值已经存在");       
     } else {       
         var varItem = new Option(objItemText, objItemValue);     
         objSelect.options.add(varItem);    
         alert("成功加入");    
     }       
}       
  
// 3.从select选项中 删除一个Item       
function jsRemoveItemFromSelect(objSelect, objItemValue) {       
     //判断是否存在       
     if (jsSelectIsExitItem(objSelect, objItemValue)) {       
         for (var i = 0; i < objSelect.options.length; i++) {       
             if (objSelect.options[i].value == objItemValue) {       
                 objSelect.options.remove(i);       
                 break;       
             }       
         }       
         alert("成功删除");       
     } else {       
         alert("该select中 不存在该项");       
     }       
}   
  
  
// 4.删除select中选中的项   
function jsRemoveSelectedItemFromSelect(objSelect) {       
     var length = objSelect.options.length - 1;   
     for(var i = length; i >= 0; i--){   
         if(objSelect[i].selected == true){   
             objSelect.options[i] = null;   
         }   
     }   
}     
  
// 5.修改select选项中 value="paraValue"的text为"paraText"       
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {       
     //判断是否存在       
     if (jsSelectIsExitItem(objSelect, objItemValue)) {       
         for (var i = 0; i < objSelect.options.length; i++) {       
             if (objSelect.options[i].value == objItemValue) {       
                 objSelect.options[i].text = objItemText;       
                 break;       
             }       
         }       
         alert("成功修改");       
     } else {       
         alert("该select中 不存在该项");       
     }       
}       
  
// 6.设置select中text="paraText"的第一个Item为选中       
function jsSelectItemByValue(objSelect, objItemText) {           
     //判断是否存在       
     var isExit = false;       
     for (var i = 0; i < objSelect.options.length; i++) {       
         if (objSelect.options[i].text == objItemText) {       
             objSelect.options[i].selected = true;       
             isExit = true;       
             break;       
         }       
     }             
     //Show出结果       
     if (isExit) {       
         alert("成功选中");       
     } else {       
         alert("该select中 不存在该项");       
     }       
}       
  
// 7.设置select中value="paraValue"的Item为选中   
objSelect.value = objItemValue;   
      
// 8.得到select的当前选中项的value   
var currSelectValue = objSelect.value;   
      
// 9.得到select的当前选中项的text   
var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text;   
      
// 10.得到select的当前选中项的Index   
var currSelectIndex = objSelect.selectedIndex;   
      
// 11.清空select的项   
objSelect.options.length = 0;  
整个实例的完整代码如下:
<!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: i@lxl.cn
// Modify: i@cnlei.com
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>
分享到:
评论

相关推荐

    js 动态新增改变删除select的值

    #### 标题:js 动态新增改变删除select的值 在网页开发中,`&lt;select&gt;`元素是非常常见的表单元素之一,用于提供下拉列表供用户选择。JavaScript 提供了丰富的 API 来操作 `&lt;select&gt;` 元素及其选项。本文将详细讲解...

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

    在HTML和JavaScript编程中,`&lt;select&gt;`元素用于创建下拉列表,经常需要进行动态操作,比如添加、删除、修改选项,以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能,并判断控件是否存在。...

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

    在网页开发中,JavaScript(简称JS)是一种必不可少的前端编程语言,它被广泛用于实现页面交互和动态效果。本文将详细讲解如何使用JavaScript来模拟点击一个`&lt;select&gt;`元素,从而展示其下拉菜单列表。`&lt;select&gt;`是...

    javascript 操作表单select的常用步骤

    修改Select中特定值的选项文本 ```javascript function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { // 判断该值是否已存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { for (var ...

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

    `hselect` 是一个非常实用的JavaScript小工具,专为开发者设计,用于方便地在网页中通过JavaScript来动态修改伪元素的CSS样式。这个工具尤其适用于那些需要对页面上的某些元素进行动态定制或者交互效果增强的情况,...

    动态循环加载select中选中的值

    动态循环加载`select`中选中的值是一项常见的需求,特别是在数据驱动的Web应用中,需要根据服务器返回的数据动态生成并更新下拉选项。在这个场景中,我们需要实现的功能是:当页面加载时,能够自动选中特定的值,这...

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

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

    select级联框 js json 全动态

    总结,"select级联框 js json 全动态"是一个利用jQuery和JSON数据实现的动态交互功能,它通过监听用户的选择,动态地生成和更新选择框的内容,为用户提供流畅的多级选择体验。在实际项目中,这样的功能可以大大增强...

    使select可以输入

    自制的jquery插件,只需要一行代码,即可将select控件变成一个即可以输入也可以选择的元素,输入...用脚本动态设置select的值时请在后面加上一个change()这样显示的值才会改变。不知道怎么监控脚本对select的值的修改。

    Ant design vue中的a-select在动态给option赋值之后,placeholder失效.pdf

    在实际开发过程中,我们可能会遇到一个常见问题,即当动态地给`a-select`的`option`赋值后,其`placeholder`属性失效,不再显示默认提示文本。这个问题通常出现在数据异步加载的情况下,比如从服务器获取数据并填充...

    js动态改变select选择变更option的index值示例

    在JavaScript中,可以通过DOM操作来动态改变select的选项(option)以及选中特定的option。 首先,要改变select选择变更option的index值,我们必须了解select和option的DOM结构。select元素包含多个option元素,每...

    js里怎么取select标签里的值并修改

    在JavaScript中,获取和修改`select`标签中的值是常见的操作,特别是在动态更新表单或者交互式用户界面中。在给定的标题和描述中,我们关注的是如何找到具有特定文本或值的`option`元素,并对其进行修改。下面将详细...

    .net修改select的值

    主要是用C# js jquery等方法控制select控件的选择值等

    js操作select控件大全

    js 操作 select 控件大全是 JavaScript 中对 select 控件的各种操作的集合,包括新增、修改、删除、选中、清空、判断存在等多种操作。下面将对这些操作进行详细的介绍和讲解。 一、 判断 select 选项中是否存在 ...

    jquery select 选中值设置左右select选择互换

    当任一select的选中值改变时,它会将当前选中值传递到另一个select,并清除自身的选中状态。这样,用户在任一侧选择一个值后,该值会立即被交换到另一侧,同时自身清空。 在实际应用中,你可能需要根据业务需求进行...

    js控制select相关方法

    在JavaScript中,对HTML元素`&lt;select&gt;`进行操作是网页动态交互的重要部分。这个标签用于创建下拉列表,可以通过JS来实现对下拉列表的选择、添加、删除和更新等操作。以下是对标题和描述中提到的JavaScript控制`...

    jquery 动态select实现

    在jQuery中,动态创建或修改`select`元素的基本步骤包括: 1. **选择元素**:使用jQuery的选择器找到页面上的`select`元素。例如,如果我们有一个ID为`mySelect`的`select`,可以使用`$("#mySelect")`来选取它。 2...

    select多级动态联动

    总结起来,"select多级动态联动"是网页交互设计中的一种常见技术,通过JavaScript或前端框架来实现。它提高了用户体验,使得用户能更直观地操作层级结构数据。在实际应用中,可以根据项目需求选择合适的实现方式,...

    JS更改select内option属性的方法

    它展示了如何利用JavaScript进行跨窗口数据交互,以及如何动态地修改页面元素的属性,这些都是在进行网页开发时常用到的技能。通过这种动态操作,开发者可以创建更为动态和响应式的网页界面,从而提升用户体验。 ...

Global site tag (gtag.js) - Google Analytics