`
thomas0988
  • 浏览: 473765 次
  • 性别: 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;   

分享到:
评论

相关推荐

    selectpage.js,版本2.19

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

    React.js 的 Select 组件

    React-Select React 的 Select 控件。 最初构建用于 KeystoneJS。 请参阅 react-select.com 获取实时演示和综合文档。 React Select 由 Thinkmill 和 ...yarn add react-select 然后在你的应用中使用它: With React C

    blzr.bootstrap-select:一个免费JavaScript Blazor组件,用于创建引导程序选择元素

    blzr.bootstrap-选择Blazor引导选择组件的灵感来自js ,它使用C#作为Razor组件进行了重写。 JavaScript没有依赖关系。进行设定将项目引用添加到Blzr.BootstrapSelect库1.注册服务您将需要在您的应用程序中注册Blzr....

    Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的...

    javascript eval&#40;&#41;应用实例 select

    javascript eval应用小例子。实例代码就是控制checkbox的选择与取消的函数,非常不错。

    为ion-select添加图片

    3.通过这个实列,你会在ionic中灵活应用css样式;还会学到javaScript的一些知识(如:获取Dom节点、获取html元素、自定义html元素) 4.内附有详细的代码介绍以及各种注意细节,可供各位喜欢研究ionic的学者学习参考

    svelte-select:Svelte 应用程序的选择组件

    Svelte 应用程序的选择/自动完成组件。 支持分组、过滤、异步等。 演示 :seedling: :sunflower: 安装 yarn add svelte-select 注意:如果使用避免 SSR 错误,请作为开发依赖项安装(yarn add svelte-select --dev...

    用于Ionic应用的单选或多选框ion-select-autocomplete.zip

    ion-select-autocomplete是一个用于Ionic应用的单选或多选框。使用方法下载或者clone项目,并添加下面的代码[removed][removed]In JS$scope.optionList = [  {  label: 'India',  value: 'IND'  },  {...

    JS简单操作select和dropdownlist实例

    主要介绍了JS简单操作select和dropdownlist的方法,以实例形式讲述了js针对服务器控件select和dropdownlist的读写操作方法,是js与.net交互的典型应用实例,需要的朋友可以参考下

    省、市、地区联动选择压缩版应用实例

    户 口 所 在 地:&lt;select name="province1"&gt;&lt;/select&gt;&lt;select name="city1"&gt;&lt;/select&gt;&lt;select name="area1"&gt;&lt;/select&gt; 工 作 所 在 地:&lt;select name="province2"&gt;&lt;/select&gt;&lt;select name="city2"&gt;&lt;/select&gt;...

    select 下拉列表联动 省市 日期 简单易用

     应用说明:页面包含&lt;script type="text/javascript" src="pcasunzip.js" charset="gb2312"&gt; 省市联动 new PCAS("Province","City") new PCAS("Province","City","吉林省") new PCAS("Province","City","吉林...

    react-select:React.js的选择组件

    React选择 的Select控件。...使用react-select的最简单方法是从npm安装它,并使用Webpack将其构建到您的应用程序中。 yarn add react-select 然后在您的应用中使用它: 带React组件 import React f

    Angular-SelectPicker:Angular SelectPicker是基于角度的选择指令,具有高级功能,例如silvio进行的bootstrap-select

    适用于应用程序的响应式,精美的SELECT。 尝试 入门 依存关系 该存储库包含用于渲染选择面的本地AngularJS指令。 唯一需要的依赖项是: (已在1.3.14上进行了测试,尽管它可能适用于较旧的版本) 安装 可以下载。 ...

    cn-city-select:用于为 Angular 应用程序提供中国区域选择器的指令

    这是一个插件,可以轻松地将中国区域选择器添加到您的 Angular 应用程序中。 安装 使用 bower 安装此插件。 # enter your asset directory bower install angular cn-city-select --save 用法 首先你应该在你的...

    jquery的clone方法应用于textarea和select的bug修复

    测试发现,textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,发现这个是jquery的一个bug,上不了的可以看下代码,比较简单。就是在clone的时候将val再重新赋值一下,如果知道这个...

    select下拉选择框美化实现代码(js+css+图片)

    因为虽然实现起来麻烦点,如果用自带的Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种Js在网页中的应用实战,多种元素之间的配合作用等。效果如下图:  下拉select选择框 body{margin:20px auto...

    javascript高级教程.pdf

    1.4 Web 应用程序结构 1.5 JavaScript 与VBScript 第2 章 JavaScript 与HTML 2.6 HTML 基 础 2.7 在HTML 文档中嵌入JavaScript 2.8 编写JavaScript 脚本 第3 章 JavaScript 基本语法 3.9 JavaScript 基本数据结构 ...

    Javascript查询DBpedia小应用实例学习

    Javascript查询DBpedia小应用 上一篇文章中,我们了解了SPARQL、SPARQL Endpoint,并简单做了一个SPARQLWrapper.js,来从DBpedia中查询了一些数据。 本文则尝试利用SPARQLWrapper.js来读取DBpedia的数据,并显示出来...

    sails-mysql-live-select-chat-example:带有实时MySQL结果集的SailsJS示例应用程序

    一个聊天室应用程序,应用程序使用来提供模型的实时(实时)结果集。 本示例使用作为前端框架。 该示例的原始灵感来自。 另外,。 安装 以下说明假定您已经安装了Node.js。 # Clone the repository git clone git...

Global site tag (gtag.js) - Google Analytics