JQuery实现下拉框的选择 与当CheckBox为服务器控件时如何获取值的操作，实现全选与删除

 

 

<script type="text/javascript" defer="defer">
       //选择DropDownList中的值并保存在隐藏域中

 //选择接等员
function SelectReceptionist()
{
   if ($("#<%=ddlSelectReceptionist.ClientID %>").val() != "")
    {
        $("#<%=hfReceptionist.ClientID %>").val($("#<%= ddlSelectReceptionist.ClientID %>").val());
    }
}

 

//全选
$(function()
{
    $("#chkAll").bind("click", function()
    {
        if ($("#chkAll").attr("checked") == true)
        {
            $("input[name$='chkClass']").each(function() //("input[name='chkClass']")
            {
                $(this).attr("checked", true);
            });
        }
        else
        {
            $("input[name$='chkClass']").each(function()//input[name='chkClass']
            {
                $(this).attr("checked", false);
            });
        }
    });
});

 

 

//保存要安排接待员的班级ID
    function ArrangeReceptionist()
    {
        var texts = "";
        //$(":checkbox").each
        //$("input[name='chkClass']")
        $("input[name$='chkClass']").each(function()
        {
            if ($(this).attr("checked") == true)
            {
                //texts += $("span[name='chkClass']").attr("title") + ";";

　　　　　　texts += $(this).parent().attr("title") + ";"; //解决CheckBox为服务器控件的问题,得到父对象的title属性,在下面解释

            }
        });

        if (texts != "")
        {
            if (confirm("确定要给这些班级安排接待员吗?") == true)
            {
                var tempClass = texts.substring(0, texts.length - 1);
                $("#<%= hfSelectedClass.ClientID %>").val(tempClass);
                return true;
            }
            else
            {
                return false;
            }
        }
        else
        {
            alert("请选择要安排的班级");
            return false;
        }
    }

</script>

 <table>

　　<tr class="dataTable2Row">
           <td class="dataTable2Text">选择接待员:</td>
           <td >
             <asp:DropDownList runat="server" ID="ddlSelectReceptionist" CssClass="select2" Width="120px" onchange="SelectReceptionist()" >
       
            </asp:DropDownList>
            <asp:HiddenField ID="hfReceptionist" runat="server" />   
          </td>

      </tr>

      <tr>
   <td  valign="top">
    <asp:GridView ID="gvClassInfoList" runat="server" Width="100%" AutoGenerateColumns="False" DataKeyNames="ClassID" CssClass="Grid"  >
        <Columns>
            <asp:TemplateField HeaderText="全选">
                <HeaderTemplate>
                    <input ID="chkAll" type="checkbox" name="chkAll"  value="全选" />
                </HeaderTemplate>
                <ItemTemplate>
                  <asp:CheckBox ID="chkClass" name="chkClass" title='<%# Eval("ClassID") %>' runat="server"  /> //CheckBox为服务器控件       
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="班级ID" Visible="False">
                <ItemTemplate>
                    <asp:Label ID="lblClassId" runat="server" Text='<%# Eval("ClassID") %>' Visible="false" ></asp:Label>
                </ItemTemplate>                       
            </asp:TemplateField>
            <asp:BoundField DataField="CLASSNO" HeaderText="班级代码" SortExpression="IS_REPLY">
                <HeaderStyle Wrap="False" />
            </asp:BoundField>
            <asp:BoundField DataField="FROMNO" HeaderText="延续自" ></asp:BoundField>                   
            <asp:BoundField DataField="ATTENDNO" HeaderText="延续至" ></asp:BoundField>
            <asp:BoundField DataField="WITHNO" HeaderText="合班" ></asp:BoundField>
            <asp:BoundField DataField="Receptionist" HeaderText="接待员"  ></asp:BoundField>                   
            <asp:BoundField DataField="PROGRAMNAME" HeaderText="培训项目" />
            <asp:BoundField DataField="ItemName" HeaderText="类别 " ></asp:BoundField>
            <asp:BoundField DataField="TRAINEENO" HeaderText="总人数" ></asp:BoundField>
            <asp:BoundField DataField="STARTDATE" HeaderText="理论开始时间" HtmlEncode=false DataFormatString="{0:yyyy-MM-dd}"></asp:BoundField>
            <asp:BoundField DataField="ENDDATE" HeaderText="理论结束时间" HtmlEncode=false DataFormatString="{0:yyyy-MM-dd}"></asp:BoundField>
            <asp:BoundField DataField="DAYS" HeaderText="时长" ></asp:BoundField>                                      
            <asp:BoundField DataField="WITHNO" HeaderText="合班" ></asp:BoundField>
            <asp:TemplateField HeaderText="团组资料">
                <ItemTemplate>
                    <div>                               
                        <asp:Label ID="lblOrgName" runat="server" Text='<%#Eval("OrgNameAndTraineeNo") %>'></asp:Label>
                    </div>
                </ItemTemplate>
           </asp:TemplateField>
           <asp:BoundField DataField="Remark" HeaderText="备注" ></asp:BoundField>                                   
        </Columns>
    </asp:GridView>
 </td>          
</tr>     

</table>

 

//备注：

texts += $(this).parent().attr("title") + ";";

//解决CheckBox为服务器控件的问题,通过取得当前CheckBox对象的父对象的title属性来取得保存在其中的ID值，因为服务器CheckBox不支持value属性

在页面每一个CheckBox被解析为，在外面包了一个<span></span>作为它的父对象

<span name="chkClass" title="fde867e6-6f95-47cf-aab8-8f25c4695e37">
         <input id="ctl00_SmartComContentPlace_gvClassInfoList_ctl02_chkClass" type="checkbox"  name="ctl00$SmartComContentPlace$gvClassInfoList$ctl02$chkClass" />
</span>

 

另外JQuery有用的几个方法有如下:

1、children

这个函数得到一组元素的直接子级。

如： $('.rating').children('.on')

 

2、filter

这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除

如：：$('.star').filter('.on')

 

3、not

与filter恰恰相 反，not()从集合中移除匹配的元素。

$('.star').not(':even')

 

4、add

如果我们想在集合中增加一些元素怎么办？add()函 数正是做这件事的。

$('.star').add('.photo')

 

5、slice

有时候，我们需要根据元素在集合的位置获取集合的子集。sliece()正是做这个的。

第一个参数是从零开始的第一个元素的位置，它包含在返回的片段中；

第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略，将延伸至集合的末尾；

所以，slice(0,2)将选取前两 个star。

$('.star').slice(0,2)

 

6、parent

parent()函数选取一系列元素的直接父级。

$('.start:first').parent()

 

7、parents

这是复数形式，parents()选 择集合的所有祖先元素。我的意思是所有祖先元素包括直接父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。

通过给parents()传 递.container参数，div.container将被选中，它实际上第一个star的祖父。

$('.star).parents('.container')

 

8、siblings

这个函数选择一组元素的所有兄弟姐妹，传递一个表达式可以筛选结果。

 

9、prev & prevAll

prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节点。

$('.rating:nth-child(3)').prevAll()//第三个节点前的兄弟节点被选中

 

10、next & nextAll

这些函数与prev和prevAll工作方式相同，不过它选择的是下一个兄弟姐妹。

$('.rating:nth-child(3)').nextAll()//第三个节点后的兄弟节点被选中

 

$('.star').click(function(){

         $(this).addClass('on');

//       如何取得当前对象的 父级?

         $(this).parent().addClass('rated');

//       如何获得当前对象左 侧的star?

         $(this).prevAll().addClass('on');

         $(this).nextAll().removeClass('on');

});

 

以上10个函数链接：http://www.chinaz.com/Program/XML/033011015R010.html

另外如下：

〈body〉
〈div id=“one“〉
〈div id=“two“〉hello〈/div〉
〈div id=“three“〉
   〈p〉〈a href=“#“〉tonsh〈/a〉〈/p〉
〈/div〉
〈/div〉

$(”a”).parent()将会得到父对象〈p〉
$(”a”).parents()得到父对象为〈p〉〈div.3〉〈div.1〉
$(”a”).parents().filter(”div”)将得到〈div.3〉〈div.1〉,还可以写成$(”a”).parents(”div”)。

如果想的到〈div.2〉对象可以写成这样：$(”a”).parents(”div:eq(0)”)。

如果需要点击〈a〉链接时弹出〈div.2〉中的内容，就这么办：

var id=$(“a“).parents(“div:eq(1)“).children(“div:eq(0)“).html();
alert(id);