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

代码如下:

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;
}
}

赞 (0)

相关推荐

  • js select option对象小结

    一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> //options是个数组,里面可以存放多个<option value="

  • jQuery结合CSS制作漂亮的select下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单. XHTML <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#">长沙</a></li

  • JS、jQuery中select的用法详解

    1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

  • jquery模拟SELECT下拉框取值效果

    jquery模拟SELECT下拉框取值效果

    jquery模拟SELECT框,效果图如下:   复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-sty

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

    //遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each(function(){   if($(this).val() == 111){   

  • 删除select中所有option选项jquery代码

    这样写 复制代码 代码如下: <select id="search"> <option>baidu</option> <option>sogou</option> </select> 清空: 复制代码 代码如下: $("#search").find("option").remove(); 或者 $("#search").empty();

  • jquery及原生js获取select下拉框选中的值示例

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

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

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[tex

  • jsp中select的onchange事件用法实例

    本文实例讲述了jsp中select的onchange事件用法.分享给大家供大家参考,具体如下: <script language = "JavaScript"> var onecount; onecount=0; subcat = new Array(); <% int count = 0; java.sql.ResultSet rs1 = DBManage.executeQuery("select hydm,zhydm,zhymc from zhy &qu

  • JSP页面中如何用select标签实现级联

    JSP页面中如何用select标签实现级联

    做查询页面,查询条件比较多的时候往往会涉及到级联.举个简单的例子,拿教务系统来说,我们要查询教学计划信息,查询条件是入学批次.学生层次(专升本.高升专).专业.课程. 它们之间有什么级联关系呢?入学批次影响学生层次(某个入学批次可能只有专升本或者高升专一个学生层次).专业.课程,学生层次影响专业.课程,专业又影响课程.也就是说当选择入学批次时,学生层次.专业和课程的下拉框会局部刷新,选择学生层次时,专业和课程的下拉框会局部刷新,选择专业时,课程的下拉框也会局部刷新. 我们当然不希望已经选择的操作

  • js获取select选中的option的text示例代码

    javascript 复制代码 代码如下: var item = document.getElementById(""); var text = item.options[item.selectedIndex].text; jQuery 复制代码 代码如下: var text = $("#selector")[0].options[$("#selector")[0].selectedIndex].text

  • Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

  • jQuery动态添加删除select项(实现代码)

    复制代码 代码如下: // 添加function col_add() { var selObj = $("#mySelect"); var value="value"; var text="text"; selObj.append("<option value='"+value+"'>"+text+"</option>");}// 删除function col_d

  • JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id

  • js简单实现HTML标签Select联动带跳转

    复制代码 代码如下: <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 复制代码 代码如下: <FORM name="form5" id="form5" action="" method="post" target="_blank" ons

  • javascript中select下拉框的用法总结

    javascript中select下拉框的用法总结

    本文针对开发项目中遇到的问题,进行了汇总 问题1:如何选择select的option里面的值? 首先会用到一个方法 onchange():这个方法主要用于触发,选择框内容改变时间 实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="

随机推荐