`

SELECT框JS操作小结

 
阅读更多

1.判断SELECT是否存在值为reqVal的item.

 function checkItemIsExit(selObj,reqVal){
  	 var flag = false;
  	 for(var i=0;i<selObj.options.length;i++){
  	 	if(selObj.options[i].value==reqVal){
  	 		flag = true;
  	 		break;
  	 	}
  	 }
  	 return flag;
  }

2.给SELECT增加一个Option

function addItem(selObj,reqText,reqVal){
  	 if(checkItemIsExit(selObj,reqVal)){
  	 	alert('值为'+reqVal+'的SELECT框存在了!');
  	 }else{
		var option = new Option(reqText,reqVal);
		selObj.options.add(option);  	 	
  	 }
  }

 3.得到select的当前选中项的text

var text = selObj.options[selObj.selectedIndex].text;

 

4.选中VALUE=reqVal的SELECT的option

 function SelectItemByVal(selObj,reqVal){
	 for(var i=0;i<selObj.options.length;i++){
	 	if(selObj.options[i].value=reqVal){
	 		selObj.options[i].selected=true;
	 		break;
	 	}
	 }
 }

 5.删除VALUE=reqVal的item

 function removeItemByValue(selObj,reqVal){
	 var flag = false;
	 alert(reqVal);
	 for(var i=0;i<selObj.options.length;i++){
	 	if(selObj.options[i].value==reqVal){
	 		selObj.options.remove(i);
	 		flag = true;
	 		break;
	 	}
	 }
	 if(flag){
	 	alert('删除成功!');
	 }else{
	 	alert('删除失败!');
	 }
 }	 

 

6. 清空SELECT 框:

 function clearSel(selObj){
	 selObj.options.length=0;
}

 

7.获得当前SELECT框的值:

var value = selObj.value;

 

 更改SELECT在页面上的显示方式:

<select name="holiday" id="holiday" style="width:300px;height: 80px;" size=10>
          <option value="-1">请选择节日</option>
  </select>

 

分享到:
评论

相关推荐

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

    #### 四、小结 通过上述详细介绍,我们可以看到利用JavaScript和jQuery操作`&lt;select&gt;`元素十分灵活且功能强大。这些技术不仅适用于简单的表单处理,还能够支持复杂的动态数据绑定和用户交互设计。希望本篇文档能帮助...

    vue+layui实现select动态加载后台数据的例子

    ### 小结 通过这篇文档,我们可以了解到如何在Vue.js项目中结合Layui的表单组件来实现select的动态加载,并通过一些编程技巧解决前后端渲染时间差的问题。此外,还学习到如何使用axios来处理HTTP请求,并利用Vue的...

    jQuery select操作控制方法小结

    在现代网页设计中,JavaScript库jQuery极大地方便了开发人员对网页元素的操作。特别是在处理HTML的SELECT元素时,jQuery提供了一系列简单有效的方法来控制select下拉列表,包括获取选中项的文本和值、设置选中项、...

    js select option对象小结

    一基础理解: var e = document.getElementById(“selectId”); e. options= new Option(“文本”,”值”) ;...selectedIndex属性——–当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,

    浅析jQuery对select操作小结(遍历option,操作option)

    jQuery不仅对select元素提供了便利的操作方法,对于单选框和复选框也有类似的操作。例如,使用“$("input[@type=radio][@checked]").val()”可以获取选中的单选框的值,而“$("input[@type=checkbox][@checked]")....

    jQuery Select下拉框操作小结(推荐)

    jQuery是一种快速、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。在前端开发中,Select下拉框是常见的表单元素,用于选择列表中的一个或多个选项。本文将详细介绍如何使用...

    jquery操作select option 的代码小结

    知识点一:获取select中选中的option的value和text 在html中,select元素中的option元素可以通过value属性设置一个值,同时,option元素显示的文本内容则是option元素的子节点。使用jquery获取select元素中选中的...

    Select2.js下拉框使用小结

    《Select2.js下拉框使用详解》 ...总的来说,Select2.js提供了丰富的功能,使得下拉框的选择操作更加灵活和人性化。通过理解和应用上述知识,开发者能够构建出交互性强、用户体验优秀的下拉框组件。

    javascript 框架小结 个人工作经验

    这篇“javascript框架小结”是作者萧枫的工作经验分享,他为JavaScript的全局对象XiaoFeng添加了一系列实用方法,从而构建了一个自定义的JavaScript框架。 首先,XiaoFeng\System中添加了一个名为Scroll的方法,...

    BootStrap与Select2使用小结

    例如,通过设置`minimumInputLength`来限制搜索框在用户输入一定字符后才开始搜索,或者监听`select2:select`事件来执行特定操作。 总的来说,Bootstrap和Select2的组合为开发者提供了强大的工具,使得创建功能丰富...

    jquery对单选框,多选框,文本框等常见操作小结

    本文主要探讨了如何使用jQuery来操作常见的表单元素,如单选框、多选框和文本框,帮助开发者更高效地实现功能。 首先,我们来看一下jQuery如何处理单选框(Radio Buttons)和多选框(Checkboxes)。对于单选框,...

    JavaScript中textRange对象使用方法小结

    JavaScript中的TextRange对象是一个用于操作HTML文档中文本流的重要接口,它允许开发者对页面中的文本执行一系列操作,如选择、搜索和修改。TextRange对象属于动态HTML(DHTML)的一部分,能够帮助开发者实现更加...

    jquery取单选,复选,下拉小结

    这篇博客"jquery取单选,复选,下拉小结"是关于如何使用jQuery来操作网页中的单选按钮(radio)、复选框(checkbox)以及下拉列表(select)的选择项。下面我们将详细探讨这些知识点。 首先,我们来讨论如何使用...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测  ... 12.9 小结

    jquerymobile经验小结

    ### jQuery Mobile 经验小结 #### 一、概述 jQuery Mobile 是一款基于 HTML5 的移动设备框架,它为开发者提供了构建响应式网站、应用程序的能力。通过使用 jQuery Mobile,可以轻松地创建适用于不同屏幕尺寸的网页...

Global site tag (gtag.js) - Google Analytics