`
xiamw2000
  • 浏览: 1199 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

js操作select下拉框

 
阅读更多
      1:判断select选项中是否存在item 
      function selectIsExitItem(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 addItemToSelect(objSelect,objItemText,objItemValue) 
        { 
             //判断是否存在 
             if(jsSelectIsExitItem(objSelect,objItemValue)) 
             { 
                 //alert("该Item的Value值已经存在"); 
             }else{ 
                 var varItem = new Option(objItemText,objItemValue); 
                 //objSelect.options[objSelect.options.length] = varItem; 
                 objSelect.options.add(varItem); 
                 //alert("成功加入"); 
             }    
        } 
        3:删除item 
        function removeItem(objSelect, objItemValue) { 
             //判断是否存在 
             if (isExitItem(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("不存在!"); 
              } 
          } 
4.删除select中选中的项   
function removeSelectedItem(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 (isExitItem(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;
 
分享到:
评论

相关推荐

    Javascript 操作select下拉框

    ### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中,`&lt;select&gt;` 元素用于创建下拉列表(或选择框)。这些选择框在用户界面中非常常见,可以用来收集用户输入的信息,比如让用户从一系列选项中选择一个...

    html最全的js javascript操作select 下拉框

    根据给定的文件标题、描述、标签以及部分内容,本文将深入解析HTML中使用JavaScript操作`&lt;select&gt;`下拉框的全面方法。`&lt;select&gt;`元素是网页表单中用于创建下拉列表的关键部分,而通过JavaScript,我们可以动态地添加...

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

    **纯JS超酷Select下拉框美化插件——TastySelect** 在网页设计中,Select下拉框作为数据选择的常见元素,其样式通常由浏览器默认控制,这往往不符合现代网页设计的美观需求。为了解决这个问题,开发者们创造了各种...

    select 下拉框可以多选

    综上所述,"select下拉框可以多选"涉及到HTML、CSS、JavaScript基础,以及可能的库和插件的使用,还有无障碍性设计。掌握这些知识点能帮助开发者创建功能丰富、用户体验良好的多选下拉框。在压缩包文件中的"select...

    select下拉框添加搜索功能

    这就是"select下拉框添加搜索功能"这个知识点的核心所在。 在`select`下拉框中实现搜索功能,一般有两种常见方法:一种是原生HTML和JavaScript的实现,另一种是借助第三方库,如本例中的`jquery.editable-select`。...

    JS操作select下拉框动态变动(创建/删除/获取)

    标题所指的知识点是关于使用JavaScript来动态地操作HTML中的select下拉框元素,包括创建和删除select元素本身,以及对select元素中的option选项进行添加、删除、获取和修改等操作。以下是各知识点的详细说明: 1. ...

    jQGrid动态填充select下拉框的选项值(动态填充)

    在某些场景下,我们需要动态地填充select下拉框的选项值,以实现更灵活的数据输入。本篇文章将详细探讨如何在jQGrid中实现这一功能。 首先,理解`select`下拉框的基本概念。在HTML中,`&lt;select&gt;`元素用于创建一个...

    搜索功能select下拉框实现自动匹配

    带搜索功能的select下拉框,类似百度google的搜索框,自己匹配,很好用

    jQuery select下拉框美化代码.zip

    首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在这个项目中,`jquery.1.10.2.min.js` 是基础,它提供了用于实现下拉框美化所需的各种功能和方法。 美化HTML...

    键盘操作select下拉框

    以下是一个使用JavaScript实现键盘操作`select`下拉框的示例: ```javascript document.querySelectorAll('select').forEach(select =&gt; { select.addEventListener('keydown', function(event) { const options =...

    JS模拟select 下拉框组件

    **JS模拟Select下拉框组件详解** 在网页开发中,Select元素是常用的数据选择控件,但其样式和交互方式往往不能满足设计师和开发者对于用户体验的高要求。为了解决这个问题,开发人员通常会使用JavaScript来模拟...

    select下拉框自动显示选项

    select下拉框,按下空格键后让它的选项显示出来,按回车键选中值

    写一个可编辑的select下拉框

    ### 可编辑Select下拉框实现方法 #### 一、引言 在现代Web开发中,用户界面(UI)的设计对于提升用户体验至关重要。一个常见的需求是实现一个可编辑的`&lt;select&gt;`下拉框,即允许用户不仅能从下拉列表中选择选项,还...

    bootstrap select 下拉框通过拼音搜索汉字

    在“bootstrap select 下拉框通过拼音搜索汉字”这个实例中,我们关注的重点是如何利用该插件实现通过输入拼音来搜索并筛选汉字的功能,这对于中文环境下的用户体验提升有着显著的作用。 首先,我们要了解Bootstrap...

    select下拉框支持搜索【中文搜索】文件

    在网页设计和开发中,`select` 下拉框是一个常见的元素,用于用户选择预设的选项。然而,当选项数量庞大或包含大量中文文本时,传统的`select`下拉框可能无法满足用户友好的交互需求。为了提升用户体验,我们可以...

    仿select下拉框

    在实现仿select下拉框时,通常会使用JavaScript库或框架,如jQuery、React、Vue等,结合CSS预处理器(如Sass、Less)来编写代码。例如,`select_menu`可能是一个包含这些实现的示例项目,其中可能包含HTML模板、CSS...

    jquery+html自定义select下拉框,下拉框美化

    在网页设计中,为了提供更好的用户体验和视觉效果,开发者经常需要对HTML元素进行自定义和美化,特别是像`&lt;select&gt;`这样的下拉框。本文将详细介绍如何使用jQuery和HTML来创建自定义的下拉框,并对其进行美化和优化。...

Global site tag (gtag.js) - Google Analytics