首页  >  文章  >  php教程  >  jQuery 下拉菜单操作总结

jQuery 下拉菜单操作总结

高洛峰
高洛峰原创
2016-12-15 16:16:381244浏览

获取Select :

 获取select 选中的 text :

   $("#ddlRegType").find("option:selected").text();

 

 获取select选中的 value:

   $("#ddlRegType ").val();

 

 获取select选中的索引:

     $("#ddlRegType ").get(0).selectedIndex;

 

设置select:

 设置select 选中的索引:

     $("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

 

 设置select 选中的value:

    $("#ddlRegType ").attr("value","Normal“);

    $("#ddlRegType ").val("Normal");

    $("#ddlRegType ").get(0).value = value;

 

 设置select 选中的text:

var count=$("#ddlRegType option").length;

  for(var i=0;i { if($("#ddlRegType ").get(0).options[i].text == text)
{
$("#ddlRegType ").get(0).options[i].selected = true;

break;
}
}



$("#select_id option[text='jQuery']").attr("selected", true);



设置select option项:



$("#select_id").append("");  //添加一项option

 $("#select_id").prepend(""); //在前面插入一项option

 $("#select_id option:last").remove(); //删除索引值最大的Option

 $("#select_id option[index='0']").remove();//删除索引值为0的Option

 $("#select_id option[value='3']").remove(); //删除值为3的Option

 $("#select_id option[text='4']").remove(); //删除TEXT值为4的Option

 

清空 Select:

$("#ddlRegType ").empty();


jquery获得值:

.val()

.text()


设置值 

.val('在这里设置值')



$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');//全选 
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//取消全选 
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){//反选 
if($(this).attr("checked")){ 
$(this).removeAttr("checked"); 

else{ 
$(this).attr("checked",'true'); 

}) 
}) 
$("#btn5").click(function(){//输出选中的值 
var str=""; 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+"\r\n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
}) 

==================================================================

==================================================================


jQuery.fn.size = function()     
{     
    return jQuery(this).get(0).options.length;     
}     
//获得选中项的索引     
jQuery.fn.getSelectedIndex = function()     
{     
    return jQuery(this).get(0).selectedIndex;     
}     
//获得当前选中项的文本     
jQuery.fn.getSelectedText = function()     
{     
    if(this.size() == 0)     
    {     
        return \"下拉框中无选项\";     
    }     
    else    
    {     
        var index = this.getSelectedIndex();           
        return jQuery(this).get(0).options[index].text;     
    }     
}     
//获得当前选中项的值     
jQuery.fn.getSelectedValue = function()     
{         
    if(this.size() == 0)     
    {     
        return \"下拉框中无选中值\";     
    }     
    else    
    {     
        return jQuery(this).val();     
    }     
}     
//设置select中值为value的项为选中     
jQuery.fn.setSelectedValue = function(value)     
{     
    jQuery(this).get(0).value = value;     
}     
//设置select中文本为text的第一项被选中     
jQuery.fn.setSelectedText = function(text)     
{     
    var isExist = false;     
    var count = this.size();     
    for(var i=0;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)
{
var count = this.size();
if(index >= count || index < 0)
{
alert(\"选中项索引超出范围\");
}
else
{
jQuery(this).get(0).selectedIndex = index;
}
}
//判断select项中是否存在值为value的项
jQuery.fn.isExistItem = function(value)
{
var isExist = false;
var count = this.size();
for(var i=0;i {
if(jQuery(this).get(0).options[i].value == value)
{
isExist = true;
break;
}
}
return isExist;
}
//向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示
jQuery.fn.addOption = function(text,value)
{
if(this.isExistItem(value))
{
alert(\"待添加项的值已存在\");
}
else
{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
//删除select中值为value的项,如果该项不存在,则提示
jQuery.fn.removeItem = function(value)
{
if(this.isExistItem(value))
{
var count = this.size();
for(var i=0;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)
{
var count = this.size();
if(index >= count || index < 0)     
    {     
        alert(\"待删除项索引超出范围\");     
    }     
    else    
    {     
        jQuery(this).get(0).remove(index);     
    }     
}     
//删除select中选定的项     
jQuery.fn.removeSelected = function()     
{     
    var index = this.getSelectedIndex();     
    this.removeIndex(index);     
}     
//清除select中的所有项     
jQuery.fn.clearAll = function()     
{     
    jQuery(this).get(0).options.length = 0;     
}   



更多 jQuery 下拉菜单操作总结相关文章请关注PHP中文网!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn