Javascript 操作select控件大全 - zzwind's Blog

Javascript 操作select控件大全

zzwind posted @ 2010年7月13日 18:10 in JavaScript , 1063 阅读

 1判断select选项中 是否存在Value="paraValue"的Item 

 2向select选项中 加入一个Item 
 3从select选项中 删除一个Item 
 4删除select中选中的项 
 5修改select选项中 value="paraValue"的text为"paraText" 
 6设置select中text="paraText"的第一个Item为选中 
 7设置select中value="paraValue"的Item为选中 
 8得到select的当前选中项的value 
 9得到select的当前选中项的text 
10得到select的当前选中项的Index 

 

js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item        
function jsSelectIsExitItem(objSelect, objItemValue) {        
    var isExit = false;        
    for (var i = 0; i < objSelect.options.length; i++) {        
        if (objSelect.options[i].value == objItemValue) {        
            isExit = true;        
            break;        
        }        
    }        
    return isExit;        
}         
   
// 2.向select选项中 加入一个Item        
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        alert("该Item的Value值已经存在");        
    } else {        
        var varItem = new Option(objItemText, objItemValue);      
        objSelect.options.add(varItem);     
        alert("成功加入");     
    }        
}        
   
// 3.从select选项中 删除一个Item        
function jsRemoveItemFromSelect(objSelect, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                objSelect.options.remove(i);        
                break;        
            }        
        }        
        alert("成功删除");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}    
   
   
// 4.删除select中选中的项    
function jsRemoveSelectedItemFromSelect(objSelect) {        
    var length = objSelect.options.length - 1;    
    for(var i = length; i >= 0; i--){    
        if(objSelect[i].selected == true){    
            objSelect.options[i] = null;    
        }    
    }    
}      
   
// 5.修改select选项中 value="paraValue"的text为"paraText"        
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                objSelect.options[i].text = objItemText;        
                break;        
            }        
        }        
        alert("成功修改");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}        
   
// 6.设置select中text="paraText"的第一个Item为选中        
function jsSelectItemByValue(objSelect, objItemText) {            
    //判断是否存在        
    var isExit = false;        
    for (var i = 0; i < objSelect.options.length; i++) {        
        if (objSelect.options[i].text == objItemText) {        
            objSelect.options[i].selected = true;        
            isExit = true;        
            break;        
        }        
    }              
    //Show出结果        
    if (isExit) {        
        alert("成功选中");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}        
   
// 7.设置select中value="paraValue"的Item为选中    
document.all.objSelect.value = objItemValue;    
       
// 8.得到select的当前选中项的value    
var currSelectValue = document.all.objSelect.value;    
       
// 9.得到select的当前选中项的text    
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    
       
// 10.得到select的当前选中项的Index    
var currSelectIndex = document.all.objSelect.selectedIndex;    
       
// 11.清空select的项    
document.all.objSelect.options.length = 0;   

 

 

Avatar_small
West Bengal 5th Cla 说:
2023年8月23日 15:07

SCERT West Bengal Every Year Publish and Distribution West Bengal 5th Textbook 2024 for Elementary Students Study purpose, SCERT West Bengal Primary School Academic Year Close in Every Year Month of April,West Bengal 5th Class Textbook 2024 West Bengal Board Elementary School new Academic Year Open in Every Year Month of Jun, Every Year West Bengal State Wise Class More Than 50 Laks of Students Attended,The Printed SCERT West Bengal Class Textbook 2024 are Distributed Through Cooperative Institutions All over West Bengal.

Avatar_small
civaget 说:
2023年12月11日 04:07

Consistency in delivering fresh, updated content is a recurring theme in the ever-evolving world of 구글 seo.

Avatar_small
civaget 说:
2023年12月26日 23:02

해외축구중계 is where soccer dreams become reality.

Avatar_small
civaget 说:
2023年12月31日 18:51

누누티비's seamless streaming experience has spoiled me for other platforms.

Avatar_small
pavzi.com 说:
2024年1月07日 13:47

Pavzi website is a multiple Niche or category website which will ensure to provide information and resources on each and every topic. Some of the evergreen topics you will see on our website are Career, Job Recruitment, Educational, Technology, Reviews and others. pavzi.com We are targeting mostly so it is true that Tech, Finance, and Product Reviews. The only reason we have started this website is to make this site the need for your daily search use.

Avatar_small
civaget 说:
2024年1月07日 22:52

Join tournaments at 안전한 바카라 사이트 and showcase your skills.

Avatar_small
civaget 说:
2024年1月14日 22:41

I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get bought an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hike. เว็บคืนยอดเสียทุกวัน

Avatar_small
civaget 说:
2024年1月15日 23:56

I would like to show my thanks to this writer just for rescuing me from such a incident. After browsing throughout the world-wide-web and seeing principles which were not beneficial, I thought my entire life was done. Existing without the approaches to the issues you have solved through your entire guideline is a serious case, and those that would have adversely damaged my career if I hadn’t noticed your site. The expertise and kindness in handling all the details was useful. I’m not sure what I would’ve done if I hadn’t discovered such a point like this. I can also at this time look ahead to my future. Thanks a lot very much for your reliable and effective guide. I won’t think twice to refer your blog post to anyone who would need support about this matter. slot 138

Avatar_small
pavzi.com 说:
2024年1月18日 18:36

The primary idea or goal of this website has been to offer resources that contain comprehensive information on every subject and are accessible via the Internet. making certain that each and every reader finds the most relevant and pavzi.com worthwhile information regarding the subject they are searching for and linking to our content.Because our website is multi-niche or multi-category, it will guarantee that it offers resources and information on every subject. Our website features a number of timeless topics, including career, job recruitment, education, technology, and reviews, among others. Indeed, Tech, Finance, and Product Reviews are our primary focus.


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter
Host by is-Programmer.com | Power by Chito 1.3.3 beta | © 2007 LinuxGem | Design by Matthew "Agent Spork" McGee