jQuery技术

Java EE (Java Platform, Enterprise Edition)

字号+ 作者:H5之家 来源:H5之家 2015-10-31 10:15 我要评论( )

jquery使用技巧总结 ,大家论坛

jQuery对下拉框、单选框、多选框的处理

经过一段时间的工作,终于对jquery有了初步的认识,现在将以前遇到的一些简单的jquery操作分享给大家,希望能够对大家有所帮助:


实例如下:

<select name="sltList" id="sltList">

<option value="3">请选择</option>

<option value="1">张三</option>

<option value="2">李四</option>

</select>

下拉框:

//得到下拉菜单的选中项的文本(注意中间有空格)
var cc1 = $(‘#sltList option:selected’).text();

//得到下拉菜单的选中项的值
var cc1 = $(‘#sltList option:selected’).val();

//得到下拉菜单的选中项的ID属性值
var cc3 =
$(‘#sltList option:selected’).attr("id");

//清空下拉框//
$("#select").empty(); or

$("#select").html('');

//添加下拉框的option
$("<optionvalue='1'>1111</option>").appendTo("#select")

单选框:

//得到单选框的选中项的值(注意中间没有空格)
$(“input[name=’radio1’]:checked”).attr(“id”);
$(“input[name=’radio1’]:checked”).val();
//设置单选框value=2的为选中状态.(注意中间没有空格)
$("input[value=’2’]").attr("checked",'checked');

复选框:

//得到复选框的选中的第一项的值
$("input[name=’test’]:checked").val();

//由于复选框一般选中的是多个,所以可以循环输出
$("input[name=’test’]:checked").each(function(){
alert($(this).val());
});

//不打勾
$("#chk1").attr("checked",'');

//打勾
$("#chk2").attr("checked",true);

//判断是否已经打勾
if($("#chk1").attr('checked')==false){}

Jquery操作Select

     

  • <select name="sltList" id="sltList">      
  • <option value="1">张三</option>      
  • <option value="2">李四</option>      
  • </select>          
  • // 获取当前选中的option值
          
  • $('#sltList').val()       
  •             
  • //获取当前选中项的文本
          
  • $('#sltList option[@selected]').text(); // 获取当前选中的option,       text为文本, val则是option的值了
          
  •             
  • // 获取当前选中项的索引
          
  • $('#sltList')[0].selectedIndex; //       这个是先转换为dom对象,然后操作dom    
    ---------------------------------------------------------------------------------  
    近日在使用jquery操作select下拉列表框时遇到了一些需要注意的地方,我想实现的功能是通过点击事件动态复制一个select到table的td中,并利用td包含的文本内容找到对应的select选中项,代码如下:
      
      HTML:
      <!--下拉框-->
      <select id="stsoft"  name="stsoft">
      <option value="1">11</option>
      <option value="2">22</option>
      <option value="3">33</option>
      <option value="4">44</option>
      <option value="5">55</option>
      <option value="6">66</option>
      </select>
      
        

    <table  id="datatable" border="0" cellpadding="0"  cellspacing="0">

      

          

      

    <thead>

      

    <tr  align="left">

      

          

      

    <th>

      

    行号</th>

      

    <th>

      

    软件类型</th>

      


      

    <th>

      

    操作</th>

      

    </tr>

      

    </thead>

      

    <tr  id="template">

      

    <td  class="RowId">

      

    </td>

      


      

    <td  class="SoftType">

      

    </td>

      


      

    <td  class="update">

      

    </td>

      

    </tr>

      

    </table>
      
      js:
      

      

    $(".update").click(function(){

      

    var  soft = $(".SoftType").text();

      

    $(".SoftType").html($("#stsoft").clone());

      

          
    for(var i=0; i<$(".SoftType  select option").length; i++){

      

          

      

    if($(".SoftType  select")[0].options(i).text== soft){

      

    $(".SoftType  select")[0].selectedIndex = i;

      

    }
      }

      


      

              
    var
    rowId = $(".RowId").text();  

    var  content='\

      

    <a  href="javascript:void(0);">更新</a>&nbsp;&nbsp;\

      

    <a  href="javascript:void(0);">取消</a>\

      

    ';

      

    $(".update").html(content);

      

    });

      
      

     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery运用技巧总结

      jquery运用技巧总结

      2015-11-04 12:00

    • jquery使用技巧总结

      jquery使用技巧总结

      2015-09-23 17:08

    网友点评
    u