`
thomas0988
  • 浏览: 485099 次
  • 性别: Icon_minigender_1
  • 来自: 南阳
社区版块
存档分类
最新评论

js select 应用

 
阅读更多

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为选中    
document.all.objSelect.value = objItemValue;    
       
// 8.得到select的当前选中项的value    
var currSelectValue = document.all.objSelect.value;    
       
// 9.得到select的当前选中项的text    
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    
       
// 10.得到select的当前选中项的Index    
var currSelectIndex = document.all.objSelect.selectedIndex;    
       
// 11.清空select的项    
document.all.objSelect.options.length = 0;   

分享到:
评论

相关推荐

    select2.mim.js and select2.min.css.zip

    在实际应用中,我们通常会在文档头部引入`select2.min.css`,并在脚本部分引入`select2.min.js`,并确保在DOM加载完成后初始化Select2。例如: ```html &lt;!DOCTYPE html&gt; &lt;link href="dist/select2.min.css" rel=...

    js之Select用法

    在现代Web开发中,经常使用数据绑定框架(如React、Vue或Angular)将`select`元素与应用程序的状态关联起来,以实现动态更新和双向数据绑定。 9. **响应式设计** 在移动设备上,`select`元素可能会显示为一个可...

    select2js,css和中文包

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

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    接着,对`&lt;select&gt;`元素应用`class="selectpicker"`,并可自定义其他属性,如`data-live-search="true"`来开启搜索功能: ```html &lt;select class="selectpicker" multiple data-live-search="true"&gt; &lt;!-- ... --&gt; ...

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    js实现动态生成select中的option

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

    selectpage.js,版本2.19

    SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。它的特点还有:插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI...

    select2.js

    要实现上述功能,我们需要在页面上引入select2.js的JavaScript和CSS文件,并对Select元素进行初始化。以下是一个基本示例: ```html &lt;!DOCTYPE html&gt; &lt;link href="https://cdn.jsdelivr.net/npm/select2@4.x/...

    javascript 操作表单select的常用步骤

    ### JavaScript操作表单Select元素的常用步骤 在Web开发中,`&lt;select&gt;`标签用于创建一...通过以上步骤,我们可以有效地使用JavaScript来操作`&lt;select&gt;`元素,实现动态增删改查等功能,提高Web应用的交互性和用户体验。

    js select多级联动

    在JavaScript编程中,"js select多级联动"是一种常见的交互设计技术,主要用于创建具有层级关系的下拉选择框。这种技术常用于展示如地区选择、组织结构或产品分类等具有层次结构的数据。在这个场景中,当用户在第一...

    jquery下拉菜单插件SelectMenu

    `js` 目录则包含了 `SelectMenu.js` 相关的 JavaScript 文件。 总的来说,`SelectMenu.js` 是一个强大的 jQuery 下拉菜单插件,它以其简洁、易用和多样化的特性,为网页开发带来了更优的用户体验。无论是在简单的...

    前端项目-country-select-js.zip

    《前端项目:country-select-js深度解析》 在前端开发领域,选择国家的组件是一个常见的需求,比如用于用户填写地址或设置偏好。`country-select-js`是一个基于jQuery的插件,专为解决这个问题而设计。本文将深入...

    javascript操作Select标记中options集合

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

    Select2的插件下载.zip

    使用Select2非常简单,首先需要在页面中引入jQuery和Select2的JavaScript及CSS文件,然后通过简单的配置代码即可启用Select2。例如: ```html &lt;link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist...

    js实现select搜索.rar

    在标题"js实现select搜索.rar"中,我们看到这个压缩包包含的是关于这个插件的实现,特别是其搜索功能的实现代码。描述中的"jQuery bootstrap-select可搜索多选下拉列表插件"进一步强调了插件的主要特性,即搜索和...

    select2兼容ie8版本的js css zh-cn.js

    《关于Select2在IE8及更高版本中的兼容性与应用》 在Web开发过程中,兼容性问题始终是一个棘手的问题,尤其是对于那些老旧但仍然被广泛使用的浏览器,如Internet Explorer 8 (IE8)。Select2,作为一个强大的下拉框...

    select2.js插件支持拼音搜索(最新版-4.0.6)Demo

    《select2.js插件支持拼音搜索(最新版-4.0.6)Demo》 在当前的Web开发中,交互性和用户体验是...这个特性对于那些需要大量处理中文数据的应用来说,无疑提高了用户体验,使得select2.js在中文环境下的应用更加广泛。

    iosSelect.js 五级联动(最多支持六级联动)

    在实际应用中,开发者首先需要在HTML页面中引入这些文件,然后通过JavaScript调用iosSelect.js来初始化组件,设置数据源和相关配置。通过这种方式,用户可以在网页上获得如同使用原生iOS应用一样的选择体验。结合...

    select2(jquery)插件下载

    - `js`: 此目录可能包含Select2的JavaScript文件,如`select2.min.js`,这是运行Select2插件所必需的脚本。 - `select2-4.0.0`: 这表示Select2的版本号为4.0.0,其中可能包含完整的库文件、文档和其他资源。 **...

Global site tag (gtag.js) - Google Analytics