封裝html的select標(biāo)簽的js操作實(shí)例
更新時(shí)間:2013年07月02日 11:12:14 作者:
本文將為大家介紹下正如標(biāo)題所示的select操作:清空所有的選項(xiàng)、添加一個(gè)選項(xiàng)、根據(jù)值、選中一個(gè)選項(xiàng)、根據(jù)下標(biāo),選中一個(gè)選項(xiàng),感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
function BindSelect(id,dataList,fieldtext,fieldValue) {
//綁定某一個(gè)數(shù)據(jù)源,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) {//清空所有的選項(xiàng)
var select = $("#" + id)[0];
select.options.length = 0;
}
function AddOneItem(id, text, value) {//添加一個(gè)選項(xiàng)
var select = $("#" + id)[0];
select.options.add(new Option(text, value));
}
function selectOneOption(id, selectValue) {//根據(jù)值,選中一個(gè)選項(xiàng)
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">//根據(jù)下標(biāo),選中一個(gè)選項(xiàng)</SPAN>
var select = $("#" + id)[0];
var len = select.options.length;
if (index >= 0 && index <= len) {
select.options[index].selected = true;
}
}
您可能感興趣的文章:
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- 淺析jQuery對(duì)select操作小結(jié)(遍歷option,操作option)
- JSP頁(yè)面中如何用select標(biāo)簽實(shí)現(xiàn)級(jí)聯(lián)
- 刪除select中所有option選項(xiàng)jquery代碼
- JQuery中對(duì)Select的option項(xiàng)的添加、刪除、取值
- jQuery動(dòng)態(tài)添加刪除select項(xiàng)(實(shí)現(xiàn)代碼)
- js簡(jiǎn)單實(shí)現(xiàn)HTML標(biāo)簽Select聯(lián)動(dòng)帶跳轉(zhuǎn)
- jquery模擬SELECT下拉框取值效果
- jquery及原生js獲取select下拉框選中的值示例
- Js操作Select大全(取值、設(shè)置選中等等)
- js獲取select選中的option的text示例代碼
- js select option對(duì)象小結(jié)
- jQuery結(jié)合CSS制作漂亮的select下拉菜單
- jsp中select的onchange事件用法實(shí)例
- javascript中select下拉框的用法總結(jié)
- JS、jQuery中select的用法詳解
相關(guān)文章
js中通過(guò)split函數(shù)分割字符串成數(shù)組小例子
分割字符串成數(shù)組的方法有很多,不過(guò)使用最多的還是split函數(shù),接下來(lái)為大家介紹下它的具體使用方法,感興趣的朋友可以參考下2013-09-09js實(shí)現(xiàn)簡(jiǎn)潔大方的二級(jí)下拉菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)潔大方的二級(jí)下拉菜單效果代碼,涉及javascript通過(guò)鼠標(biāo)事件控制頁(yè)面元素的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)
有時(shí)候因?yàn)閏sdn的博客經(jīng)常處理一些字符,導(dǎo)致代碼很多情況下,都不能正常運(yùn)行,給大家的閱讀帶來(lái)了麻煩,下面是腳本之家編輯簡(jiǎn)單的整理下。2009-08-08excel操作之Add Data to a Spreadsheet Cell
excel操作之Add Data to a Spreadsheet Cell...2007-06-06javascript事件捕獲機(jī)制【深入分析IE和DOM中的事件模型】
這篇文章主要介紹了javascript事件捕獲機(jī)制,結(jié)合實(shí)例形式分析了冒泡的原理、事件捕獲、各瀏覽器事件處理機(jī)制與IE和DOM中的事件模型等,需要的朋友可以參考下2016-12-12