JQuery 对 Select option 的操作(转)

最新推荐文章于 2024-05-05 15:54:12 发布

暮秋十九

最新推荐文章于 2024-05-05 15:54:12 发布

阅读量285

点赞数

转自博客园:

 
         < 
         select 
         id= 
         "selectID" 
         > 
        
         <option value= 
         "1" 
         >1</option> 
        
         <option value= 
         "2" 
         >2</option> 
        
         <option value= 
         "3" 
         >3</option> 
        
         <option value= 
         "4" 
         >4</option> 
        
         <option value= 
         "5" 
         >5</option> 
        
         <option value= 
         "6" 
         >6</option> 
        
         </ 
         select 
         >

　　下面是对下拉框的基本操作：

 
      <script language= 
      "javascript" 
      > 
     
      $(document).ready(function() { 
     
      //绑定下拉框change事件，当下来框改变时调用 SelectChange()方法 
     
      $( 
      "#selectID" 
      ).change(function() { SelectChange(); });  
     
      }) 
     
      function SelectChange() { 
     
      //获取下拉框选中项的text属性值 
     
      var 
      selectText = $( 
      "#selectID" 
      ).find( 
      "option:selected" 
      ).text(); 
     
      alert(selectText); 
     
      //获取下拉框选中项的value属性值 
     
      var 
      selectValue = $( 
      "#selectID" 
      ).val(); 
     
      alert(selectValue); 
     
      //获取下拉框选中项的index属性值 
     
      var 
      selectIndex = $( 
      "#selectID" 
      ). 
      get 
      (0).selectedIndex; 
     
      alert(selectIndex); 
     
      获取下拉框最大的index属性值 
     
      var 
      selectMaxIndex = $( 
      "#selectID option:last" 
      ).attr( 
      "index" 
      ); 
     
      alert(selectMaxIndex); 
     
      } 
     
      function aa() { 
     
      //设置下拉框index属性为5的选项 选中 
     
      $( 
      "#selectID" 
      ). 
      get 
      (0).selectedIndex = 5;   
     
      } 
     
      function bb() { 
     
      //设置下拉框value属性为4的选项 选中 
     
      $( 
      "#selectID" 
      ).val(4); 
     
      } 
     
      function cc() { 
     
      //设置下拉框text属性为5的选项 选中 
     
      $( 
      "#selectID option[text=5]" 
      ).attr( 
      "selected" 
      ,  
      "selected" 
      ); 
     
      $( 
      "#yyt option:contains('5')" 
      ).attr( 
      "selected" 
      ,  
      true 
      ); 
     
      } 
     
      function dd() { 
     
      //在下拉框最后添加一个选项 
     
      $( 
      "#selectID" 
      ).append( 
      "<option value='7'>7</option>" 
      ); 
     
      } 
     
      function ee() { 
     
      //在下拉框最前添加一个选项 
     
      $( 
      "#selectID" 
      ).prepend( 
      "<option value='0'>0</option>" 
      ) 
     
      } 
     
      function ff() { 
     
      //移除下拉框最后一个选项 
     
      $( 
      "#selectID option:last" 
      ).remove(); 
     
      } 
     
      function gg() { 
     
      //移除下拉框 index属性为1的选项 
     
      $( 
      "#selectID option[index=1]" 
      ).remove(); 
     
      } 
     
      function hh() { 
     
      //移除下拉框 value属性为4的选项 
     
      $( 
      "#selectID option[value=4]" 
      ).remove(); 
     
      } 
     
      function ii() { 
     
      //移除下拉框 text属性为5的选项 
     
      $( 
      "#selectID option[text=5]" 
      ).remove(); 
     
      }     
     
      </script>