100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Javascript jQuery 操作select控件大全(新增 修改 删除 选中 清空 判断存在等)(转)...

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

时间:2021-01-11 23:58:08

相关推荐

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

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

11转存失败重新上传取消清空select的项

转存失败重新上传取消js代码

转存失败重新上传取消//1.判断select选项中是否存在Value="paraValue"的Item

转存失败重新上传取消转存失败重新上传取消functionjsSelectIsExitItem(objSelect,objItemValue)转存失败重新上传取消{

varisExit=false;

for(vari=0;i<objSelect.options.length;i++){

if(objSelect.options[i].value==objItemValue){

isExit=true;

break;

}

}

returnisExit;

}

//2.向select选项中加入一个Item

functionjsAddItemToSelect(objSelect,objItemText,objItemValue){

//判断是否存在

if(jsSelectIsExitItem(objSelect,objItemValue)){

alert("该Item的Value值已经存在");

}else{

varvarItem=newOption(objItemText,objItemValue);

objSelect.options.add(varItem);

alert("成功加入");

}

}

//3.从select选项中删除一个Item

functionjsRemoveItemFromSelect(objSelect,objItemValue){

//判断是否存在

if(jsSelectIsExitItem(objSelect,objItemValue)){

for(vari=0;i<objSelect.options.length;i++){

if(objSelect.options[i].value==objItemValue){

objSelect.options.remove(i);

break;

}

}

alert("成功删除");

}else{

alert("该select中不存在该项");

}

}

//4.删除select中选中的项

functionjsRemoveSelectedItemFromSelect(objSelect){

varlength=objSelect.options.length-1;

for(vari=length;i>=0;i--){

if(objSelect[i].selected==true){

objSelect.options[i]=null;

}

}

}

//5.修改select选项中value="paraValue"的text为"paraText"

functionjsUpdateItemToSelect(objSelect,objItemText,objItemValue){

//判断是否存在

if(jsSelectIsExitItem(objSelect,objItemValue)){

for(vari=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为选中

functionjsSelectItemByValue(objSelect,objItemText){

//判断是否存在

varisExit=false;

for(vari=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

varcurrSelectValue=document.all.objSelect.value;

//9.得到select的当前选中项的text

varcurrSelectText=document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

//10.得到select的当前选中项的Index

varcurrSelectIndex=document.all.objSelect.selectedIndex;

//11.清空select的项

document.all.objSelect.options.length=0;

Jquery操作select

1.获取列表项中候选项的数目。

2.获得选中项的索引值。

3.获得当前选中项的值

4.设定选择值

5.设定选择项

...

//得到select项的个数

jQuery.fn.size=function(){

returnjQuery(this).get(0).options.length;

}

//获得选中项的索引

jQuery.fn.getSelectedIndex=function(){

returnjQuery(this).get(0).selectedIndex;

}

//获得当前选中项的文本

jQuery.fn.getSelectedText=function(){

if(this.size()==0)return"下拉框中无选项";

else{

varindex=this.getSelectedIndex();

returnjQuery(this).get(0).options[index].text;

}

}

//获得当前选中项的值

jQuery.fn.getSelectedValue=function(){

if(this.size()==0)

return"下拉框中无选中值";

else

returnjQuery(this).val();

}

//设置select中值为value的项为选中

jQuery.fn.setSelectedValue=function(value){

jQuery(this).get(0).value=value;

}

//设置select中文本为text的第一项被选中

jQuery.fn.setSelectedText=function(text)

{

varisExist=false;

varcount=this.size();

for(vari=0;i<count;i++)

{

if(jQuery(this).get(0).options[i].text==text)

{

jQuery(this).get(0).options[i].selected=true;

isExist=true;

break;

}

}

if(!isExist)

{

alert("下拉框中不存在该项");

}

}

//设置选中指定索引项

jQuery.fn.setSelectedIndex=function(index)

{

varcount=this.size();

if(index>=count||index<0)

{

alert("选中项索引超出范围");

}

else

{

jQuery(this).get(0).selectedIndex=index;

}

}

//判断select项中是否存在值为value的项

jQuery.fn.isExistItem=function(value)

{

varisExist=false;

varcount=this.size();

for(vari=0;i<count;i++)

{

if(jQuery(this).get(0).options[i].value==value)

{

isExist=true;

break;

}

}

returnisExist;

}

//向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示

jQuery.fn.addOption=function(text,value)

{

if(this.isExistItem(value))

{

alert("待添加项的值已存在");

}

else

{

jQuery(this).get(0).options.add(newOption(text,value));

}

}

//删除select中值为value的项,如果该项不存在,则提示

jQuery.fn.removeItem=function(value)

{

if(this.isExistItem(value))

{

varcount=this.size();

for(vari=0;i<count;i++)

{

if(jQuery(this).get(0).options[i].value==value)

{

jQuery(this).get(0).remove(i);

break;

}

}

}

else

{

alert("待删除的项不存在!");

}

}

//删除select中指定索引的项

jQuery.fn.removeIndex=function(index)

{

varcount=this.size();

if(index>=count||index<0)

{

alert("待删除项索引超出范围");

}

else

{

jQuery(this).get(0).remove(index);

}

}

//删除select中选定的项

jQuery.fn.removeSelected=function()

{

varindex=this.getSelectedIndex();

this.removeIndex(index);

}

//清除select中的所有项

jQuery.fn.clearAll=function()

{

jQuery(this).get(0).options.length=0;

} ---------------------------------------- jQuery获取客户端控件select 一、 获取select中选择的text与value相关的值 获取select选择的Text : var checkText=$("#slc1").find("option:selected").text(); 获取select选择的value:var checkValue=$("#slc1").val(); 获取select选择的索引值: var checkIndex=$("#slc1 ").get(0).selectedIndex; 获取select最大的索引值: var maxIndex=$("#slc1 option:last").attr("index"); 二、 设置select选择的Text和Value 设置select索引值为1的项选中:$("#slc1 ").get(0).selectedIndex=1; 设置select的value值为4的项选中: $("#slc1 ").val(4); 设置select的Text值为JQuery的选中: $("#slc1 option[text='jQuery']").attr("selected", true); PS:特别要注意一下第三项的使用哦。看看JQuery的选择器功能是如此地强大呀! 三、 添加删除option项 为select追加一个Option(下拉项) $("#slc2").append("<option value='"+i+"'>"+i+"</option>"); 为select插入一个option(第一个位置) $("#slc2").prepend("<option value='0'>请选择</option>"); PS: prepend 这是向所有匹配元素内部的开始处插入内容的最佳方式。 删除select中索引值最大option(最后一个) $("#slc2 option:last").remove(); 删除select中索引值为0的option(第一个) $("#slc2 option[index='0']").remove(); 删除select中value=’3’的option $("#slc2 option[value='3']").remove(); 删除select中text=’4’的option $("#slc2 option[text='3']").remove();

---------------------------------------------------------

<script type="text/javascript">

$(document).ready(function(){

//添加“江苏”到下拉框的最后一位

$('#add_to_last').click(function(){

$('#select').append('<OPTION value="江苏">江苏</OPTION>');

});

//添加“安徽”到下拉框的第一位

$('#add_to_first').click(function(){

$('#select').prepend('<OPTION value="安徽">安徽</OPTION>');

});

//获取当前的selectIndex(当前选中的下拉菜单的项目的索引)

$('#get_select_index').click(function(){

alert($('#select option:selected').attr("index"));

});

//移除下拉菜单最后一个项目

$('#remove_last_option').click(function(){

$('#select option:last').remove();

});

//移除除了第一个之外的所有选项

$('#remove_all_option_except_first').click(function(){

$('#select option').not(':first').remove();

});

//获取下拉菜单最大索引值

$('#get_max_index').click(function(){

var maxIndex=$("#select option:last").attr("index");

alert(maxIndex);

});

});

</script>

<SELECT id="select" style="width:100px"> <OPTION selected>中国省份</OPTION></SELECT> <p/>

<button id="add_to_last">添加江苏到最后一位</button><br/>

<button id="add_to_first">添加安徽到第一位</button><br/>

<button id="get_select_index">获取当前的selectIndex</button><br/>

<button id="remove_last_option">移除下拉菜单最后一个项目</button><br/>

<button id="remove_all_option_except_first">移除除了第一个之外的所有选项</button><br/>

<button id="get_max_index">获取下拉菜单最大索引值</button><br/>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。