zoukankan      html  css  js  c++  java
  • jquery操作select(取值,设置选中)

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。

    比如<select class="selector"></select>

    1、设置value为pxx的项选中

         $(".selector").val("pxx");

    2、设置text为pxx的项选中

        $(".selector").find("option[text='pxx']").attr("selected",true);

        这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

    3、获取当前选中项的value

        $(".selector").val();

    4、获取当前选中项的text

        $(".selector").find("option:selected").text();

        这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

    很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

    如:$(".selector1").change(function(){

         // 先清空第二个

          $(".selector2").empty();

         // 实际的应用中,这里的option一般都是用循环生成多个了

          var option = $("<option>").val(1).text("pxx");

          $(".selector2").append(option);

    });

    1.判断select选项中 是否存在Value="paraValue"的Item 
    $("#selectid option[@value='paraValue']").length>0
    2.向select选项中 加入一个Item 
    $("#selectid").append("<option value=''>1111<option>");
    3.从select选项中 删除一个Item 
    $("#selectid").remove("<option value=''>1111<option>");
    4.修改select选项中 value="paraValue"的text为"paraText" 
    $("#selectid option:selected").attr("value","paraValue").attr("text","paraText");
    5. 设置select中text="paraText"的第一个Item为选中 
    $("#selectid option[@text='paraText']").attr("selected","true")
    6.设置select中 value="paraValue"的Item为选中 
    $("#selectid option[@value='paraValue']").attr("selected","true")

    7.设置select中第一 个Item为选中 
    $("#selectid option").eq(0).attr('selected', 'true');

    8. 得到select的当前选中项的value 
    $("#selectid").val();
    9.得到select的当前选中项的text 
    $("#selectid").text();
    10. 得到select的当前选中项的Index 
    document.getElementById("select1").selectedIndex;
    $("#selectid").get(0).selectedIndex
    11. 清空select的项
    $("#selectid").empty();

    JS版本的:

    • //1.判断select选项中 是否存在Value="paraValue"的Item   
    • function jsSelectIsExitItem(objSelect,objItemValue)   
    • {   
    •      var isExit = false ;   
    •      for ( var i=0;i;I++)   
    •      {   
    •          if (objSelect.options[i].value == objItemValue)   
    •          {   
    •              isExit = true ;   
    •              break ;   
    •          }   
    •      }        
    •      return isExit;   
    • }   
    •   
    • //2.向select选项中 加入一个Item   
    • function jsAddItemToSelect(objSelect,objItemText,objItemValue, objItemPos)   
    • {   
    •      //判断是否存在   
    •      if (jsSelectIsExitItem(objSelect,objItemValue))   
    •      {   
    •          alert( "该Item的 Value值已经存在" );   
    •      }   
    •      else   
    •      {   
    •          var varItem = new Option(objItemText,objItemValue);   
    • //       objSelect.options[objSelect.options.length] = varItem;   
    •          objSelect.options.add(varItem, objItemPos);   
    •          alert( "成功加入" );   
    •      }      
    • }   
    •   
    • //3.从select选项中 删除一个Item   
    • function jsRemoveItemFromSelect(objSelect,objItemValue)   
    • {   
    •      //判断是否存在   
    •      if (jsSelectIsExitItem(objSelect,objItemValue))   
    •      {   
    •          for ( var i=0;i;I++)   
    •          {   
    •              if (objSelect.options[i].value == objItemValue)   
    •              {   
    •                  objSelect.options.remove(i);   
    •                  break ;   
    •              }   
    •          }          
    •          alert( "成功删除" );              
    •      }   
    •      else   
    •      {   
    •          alert( "该 select中 不存在该项" );   
    •      }      
    • }   
    •   
    • //4.修改select选项中 value="paraValue"的text为"paraText"   
    • function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)   
    • {   
    •      //判断是否存在   
    •      if (jsSelectIsExitItem(objSelect,objItemValue))   
    •      {   
    •          for ( var i=0;i;I++)   
    •          {   
    •              if (objSelect.options[i].value == objItemValue)   
    •              {   
    •                  objSelect.options[i].text = objItemText;   
    •                  break ;   
    •              }   
    •          }          
    •          alert( "成功修改" );              
    •      }   
    •      else   
    •      {   
    •          alert( "该 select中 不存在该项" );   
    •      }      
    • }   
    •           
    • //5.设置select中text="paraText"的第一个 Item为选中   
    • function jsSelectItemByValue(objSelect,objItemText)   
    • {      
    •      //判断是否存在   
    •      var isExit = false ;   
    •      for ( var i=0;i;I++)   
    •      {   
    •          if (objSelect.options[i].text == objItemText)   
    •          {   
    •              objSelect.options[i].selected = true ;   
    •              isExit = true ;   
    •              break ;   
    •          }   
    •      }        
    •      //Show出结果   
    •      if (isExit)   
    •      {   
    •          alert( "成功选中" );              
    •      }   
    •      else   
    •      {   
    •          alert( "该 select中 不存在该项" );   
    •      }      
    • }   
    •   
    • //6.设置select中value="paraValue"的Item 为选中   
    • document.all.objSelect.value = objItemValue;   
    •   
    • //7.得到select的当前选中项的value   
    • var currSelectValue = document.all.objSelect.value;   
    •   
    • //8.得到select的当前选中项的text   
    • var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;   
    •   
    • //9.得到select的当前选中项的Index   
    • var currSelectIndex = document.all.objSelect.selectedIndex;   
    •   
    • //10.清空select的项   
    • document.all.objSelect.options.length = 0; 
  • 相关阅读:
    web访问权限实现方法-探面向对象的编码设计
    解析二进制反码算数求和
    可以把erp当做一个分支-找自己的方向
    电脑开机是怎样自动加载进程
    球管模型和Java
    发明和发现
    漂浮
    js中的一些循环
    ES5中新增的一些方法
    git的一些操作
  • 原文地址:https://www.cnblogs.com/SoraAoi/p/3458152.html
Copyright © 2011-2022 走看看