Saturday 26 October 2013

Change Div/Panel Border width and color on dropdownlist selectedchanged Event using Javascript

Use this code to implement this function:

<asp:DropDownList ID="ddlchnageborderwidth" runat="server">
          <asp:ListItem Value="1px">1px</asp:ListItem>
          <asp:ListItem Value="2px">2px</asp:ListItem>
          <asp:ListItem Value="3px">3px</asp:ListItem>
          <asp:ListItem Value="4px">4px</asp:ListItem>
</asp:DropDownList>
                                             
<asp:DropDownList ID="ddlchnagebordercolor" runat="server">
         <asp:ListItem Value="#000000">Black</asp:ListItem>
         <asp:ListItem Value="#0000FF">Blue</asp:ListItem>
         <asp:ListItem Value="#A52A2A">Brown</asp:ListItem>
         <asp:ListItem Value="#FF7F50">Coral</asp:ListItem>
         <asp:ListItem Value="#A9A9A9">DarkGray</asp:ListItem>
        <asp:ListItem Value="#8B0000">DarkRed</asp:ListItem>
 </asp:DropDownList>


Color change javascript code:
<script type="text/javascript">
$("#ddlchnageborderwidth").change(function() {
    $("#someDiv").css("border-width", $(this).val());
}).change();
 </script>

                                                ​
Color change javascript code:
<script type="text/javascript">
$("#ddlchnagebordercolor").change(function() {
    $("#someDiv").css("border-color", $(this).val());
}).change();
 </script>

No comments:

Post a Comment