封装html的select标签的js操作实例

 更新时间:2013年07月02日 11:12:14   作者:  
本文将为大家介绍下正如标题所示的select操作:清空所有的选项、添加一个选项、根据值、选中一个选项、根据下标,选中一个选项,感兴趣的朋友可以参考下哈,希望对大家有所帮助
复制代码 代码如下:

function BindSelect(id,dataList,fieldtext,fieldValue) {
//绑定某一个数据源,fieldtext为需要绑定的文本字段,fieldValue为需要绑定的value字段
var select = $("#" + id)[0];
for (var i = 0; i < dataList.length; i++) {
select.options.add(new Option(eval("dataList[" + i + "]." + fieldtext), eval("dataList[" + i + "]." + fieldValue)));
}
}
function BindSelectOptions(id, OptionList) {
var select = $("#" + id)[0];
for (var i = 0; i < OptionList.length; i++) {
select.options.add(new Option(OptionList[i].Text, OptionList[i].Value));
}
}
function ClearAllItems(id) {//清空所有的选项
var select = $("#" + id)[0];
select.options.length = 0;
}
function AddOneItem(id, text, value) {//添加一个选项
var select = $("#" + id)[0];
select.options.add(new Option(text, value));
}
function selectOneOption(id, selectValue) {//根据值,选中一个选项
var select = $("#" + id)[0];
var len = select.options.length;
for (var i = 0; i < len; i++) {
if (select.options[i].value == selectValue) {
select.options[i].selected = true;
break;
}
}
}
function selectOneOptionByIndex(id, index) {//<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">//根据下标,选中一个选项</SPAN>

var select = $("#" + id)[0];
var len = select.options.length;
if (index >= 0 && index <= len) {
select.options[index].selected = true;
}
}

相关文章

  • HTML Color Picker(js拾色器效果)

    HTML Color Picker(js拾色器效果)

    这篇文章主要是用js实现拾色器效果,来自国外的网站,喜欢的朋友可以参考下
    2013-08-08
  • 第七章之菜单按钮图标组件

    第七章之菜单按钮图标组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。这篇文章主要介绍BootStrap组件之菜单按钮图标组件的相关资料,需要的朋友可以参考下
    2016-04-04
  • 写的一段拖动对象的代码

    写的一段拖动对象的代码

    写的一段拖动对象的代码...
    2007-01-01
  • Javascript 网页黑白效果实现代码(兼容IE/FF等)

    Javascript 网页黑白效果实现代码(兼容IE/FF等)

    今天在网上看到有人推荐的一个不错的方法,试了一下,效果还是可以的,可以自定义让网页的某一部分变成灰度颜色(黑白)。
    2010-04-04
  • ES6 javascript中class静态方法、属性与实例属性用法示例

    ES6 javascript中class静态方法、属性与实例属性用法示例

    这篇文章主要介绍了ES6 javascript中class静态方法、属性与实例属性用法,结合实例形式分析了ES6中类的静态方法、静态属性概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-10-10
  • js 数组详细操作方法及解析合集

    js 数组详细操作方法及解析合集

    在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下
    2018-06-06
  • JS+HTML5实现图片在线预览功能

    JS+HTML5实现图片在线预览功能

    这篇文章主要为大家详细介绍了JS+HTML5实现图片在线预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 小程序云开发实战小结

    小程序云开发实战小结

    这篇文章主要介绍了小程序云开发实战小结,本文详细的介绍了云开发以及环境的搭建和项目实践,非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • JavaScript遍历数组的方法代码实例

    JavaScript遍历数组的方法代码实例

    这篇文章主要介绍了JavaScript遍历数组的方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 微信小程序实现侧边导航栏

    微信小程序实现侧边导航栏

    这篇文章主要为大家详细介绍了微信小程序实现侧边导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论