注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转)  

2011-10-10 14:14:21|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客判断select选项中 是否存在Value="paraValue"的Item
2Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客向select选项中 加入一个Item
3Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客从select选项中 删除一个Item
4Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客删除select中选中的项
5Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客修改select选项中 value="paraValue"的text为"paraText"
6Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客设置select中text="paraText"的第一个Item为选中
7Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客设置select中value="paraValue"的Item为选中
8Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客得到select的当前选中项的value
9Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客得到select的当前选中项的text
10Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客得到select的当前选中项的Index
11Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客清空select的项

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客js 代码
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 1.判断select选项中 是否存在Value="paraValue"的Item
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
function jsSelectIsExitItem(objSelect, objItemValue) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
var
isExit =
false
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
for
(
var
i = 0; i < objSelect.options.length; i++)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if
(objSelect.options[i].value == objItemValue)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
isExit =
true
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
break
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
return
isExit;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 2.向select选项中 加入一个Item
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
//判断是否存在

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if (jsSelectIsExitItem(objSelect, objItemValue)) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("该Item的Value值已经存在");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}
else
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
var
varItem =
new
Option(objItemText, objItemValue);
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
objSelect.options.add(varItem);
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("成功加入");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 3.从select选项中 删除一个Item
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
function jsRemoveItemFromSelect(objSelect, objItemValue) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
//判断是否存在

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if (jsSelectIsExitItem(objSelect, objItemValue)) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
for
(
var
i = 0; i < objSelect.options.length; i++)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if
(objSelect.options[i].value == objItemValue)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
objSelect.options.remove(i);
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
break
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("成功删除");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}
else {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("该select中 不存在该项");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 4.删除select中选中的项
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
function jsRemoveSelectedItemFromSelect(objSelect) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
var
length = objSelect.options.length - 1;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
for
(
var
i = length; i >= 0; i--)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if
(objSelect[i].selected ==
true
)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
objSelect.options[i] =
null
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 5.修改select选项中 value="paraValue"的text为"paraText"
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
//判断是否存在

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if (jsSelectIsExitItem(objSelect, objItemValue)) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
for
(
var
i = 0; i < objSelect.options.length; i++)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if
(objSelect.options[i].value == objItemValue)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
objSelect.options[i].text = objItemText;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
break
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("成功修改");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}
else {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("该select中 不存在该项");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 6.设置select中text="paraText"的第一个Item为选中
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
function jsSelectItemByValue(objSelect, objItemText) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
//判断是否存在

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
var isExit = false;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
for
(
var
i = 0; i < objSelect.options.length; i++)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if
(objSelect.options[i].text == objItemText)
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
objSelect.options[i].selected =
true
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
isExit =
true
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
break
;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
//Show出结果

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
if (isExit) {
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("成功选中");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}
else
{
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
alert("该select中 不存在该项");
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
}

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 7.设置select中value="paraValue"的Item为选中
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
document.all.objSelect.value = objItemValue;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客// 8.得到select的当前选中项的value
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
var currSelectValue = document.all.objSelect.value;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
// 9.得到select的当前选中项的text

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
// 10.得到select的当前选中项的Index

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
var currSelectIndex = document.all.objSelect.selectedIndex;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
// 11.清空select的项

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转) - 海里的贝壳 - apple的博客
document.all.objSelect.options.length = 0;
/*select控件常见操作*/

//1、向select里添加option
function selectOptionAdd(oSelect, sName, sValue) {
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(sName));

if (arguments.length == 3) {
oOption.setAttribute("value", sValue);
}

oSelect.appendChild(oOption);
}
//在select控件的指定位置插入一项
function addOptionAtPosition(oSelect, optionValue, optionText, position) {
if (document.all) //IE
{
var option = document.createElement("option");
option.value = optionValue;
option.innerText = optionText;
oSelect.insertBefore(option, oSelect.options[position]);
}
else { //其他浏览器
oSelect.insertBefore(new Option(optionValue, optionText), oSelect.options[position]);
}
}


//2、删除select里的option
function selectOptionRemoveItem(oSelect) {
if (oSelect.selectedIndex > -1) {//说明选中
for (var i = 0; i < oSelect.options.length; i++) {
if (oSelect.options[i].selected) {
oSelect.remove(i);
i = i - 1; //注意这一行 **************************
}
}
}
}
//select移除一项
function removeOneOption(oSelect, optionValue) {
var selOptions = oSelect.options;
for (var i = 0; i < selOptions.length; i++) {
if (selOptions[i].value == optionValue) {
oSelect.remove(i);
break;
}
}
}

// 清空select所有项目
function removeSelItems(oSelect) {
//删除select中所有项
oSelect.options.length = 0;
}

//3、移动select里的option到另一个select中
function selectsMoveOption(oSelectFrom, oSelectTo) {
for (var i = 0; i < oSelectFrom.options.length; i++) {
if (oSelectFrom.options[i].selected) {
/*if 里的代码也可用下面几句代码代替 var op = oSelectFrom.options[i];oSelectTo.options.add(new Option(op.text, op.value));oSelectFrom.remove(i); */
oSelectTo.appendChild(oSelectFrom.options[i]);
i = i - 1;
}
}
}

//4、select里option的上下移动
function selectMoveUp(oSelect) {
for (var i = 1; i < oSelect.length; i++) {//最上面的一个不需要移动,所以直接从i=1开始
if (oSelect.options[i].selected) {
/*在进行上下两项互换时,也可以使用以下代码,但是效率很低,因为每一次的Dom操作都将导致整个页面的重新布局,所以不如直接修改元素的属性值。var oOption = oSelect.options[i];var oPrevOption = oSelect.options[i-1];oSelect.insertBefore(oOption,oPrevOption);向下移动同理 */
if (!oSelect.options.item(i - 1).selected) {//上面的一项没选中,上下交换
var selText = oSelect.options[i].text;
var selValue = oSelect.options[i].value;

oSelect.options[i].text = oSelect.options[i - 1].text;
oSelect.options[i].value = oSelect.options[i - 1].value;
oSelect.options[i].selected = false;

oSelect.options[i - 1].text = selText;
oSelect.options[i - 1].value = selValue;
oSelect.options[i - 1].selected = true;
}
}
}
}

function selectMoveDown(oSelect) {
for (var i = oSelect.length - 2; i >= 0; i--) {//向下移动,最后一个不需要处理,所以直接从倒数第二个开始
if (oSelect.options.item(i).selected) {
if (!oSelect.options.item(i + 1).selected) {//下面的Option没选中,上下互换
var selText = oSelect.options.item(i).text;
var selValue = oSelect.options.item(i).value;

oSelect.options.item(i).text = oSelect.options.item(i + 1).text;
oSelect.options.item(i).value = oSelect.options.item(i + 1).value;
oSelect.options.item(i).selected = false;

oSelect.options.item(i + 1).text = selText;
oSelect.options.item(i + 1).value = selValue;
oSelect.options.item(i + 1).selected = true;
}
}
}
}
//5、select里option的排序
/*这里借助Array对象的sort方法进行操作,sort方法接受一个function参数,可以在这个function里定义排序时使用的算法逻辑。*/

//因为排序可以按Option的Value排序,也可以按Text排序,这里按Value排序
function sortItems(oSelect) {
var selLength = oSelect.options.length;
var arr = new Array();
var arrLength;
//将所有Option放入array
for (var i = 0; i < selLength; i++) {
arr[i] = oSelect.options[i];
}
arrLength = arr.length;
arr.sort(sortNumber); //排序
//先将原先的Option删除
while (selLength--) {
oSelect.options[selLength] = null;
}
//将经过排序的Option放回Select中
for (i = 0; i < arrLength; i++) {
selectOptionAdd(oSelect, arr[i].text, arr[i].value);
//oSelect.add(new Option(arr[i].text,arr[i].value));
}
}

//6.鼠标悬浮时获取select的options的index
function getOptionIndex(oSelect) {
var theIndex = -1;
if (oSelect.options.length > 0) {
theIndex = Math.floor((event.offsetY + 2) / (oSelect.offsetHeight / oSelect.options.length));
if (theIndex < 0) theIndex = 0;
else if (theIndex > oSelect.options.length) theIndex = oSelect.options.length;
}
return theIndex;
}
  评论这张
 
阅读(509)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017