I have applied script on dropdownlist for stylish look and style is applied properly ,but in .cs page(code page) OnSelectedIndexChanged of dropdownlist is not working properly.
My Html Code:
<head>
<link href="css/screen.css" rel="stylesheet" media="screen" type="text/css" title="default"/>
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
});
</script>
</head>
<body>
<asp:DropDownList ID="ddprice" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddprice_SelectedIndexChanged" class="styledselect_form_1">
<asp:ListItem Value="0">BY PRICE</asp:ListItem>
<asp:ListItem Value="1">Low to High</asp:ListItem>
<asp:ListItem Value="2">High to Low</asp:ListItem>
</asp:DropDownList>
</body>
My Source code is:
protected void ddprice_SelectedIndexChanged(object sender, EventArgs e)
{
Response.redirect("index.aspx");
}
And my script in css class name screen.css is
/* STYLED Dropdown*/
div.selectbox-wrapper2 {
background-color: #e3e3e3;
border: none;
border-bottom: none;
margin: 0px;
margin-top: 0px;
max-height: 200px;
overflow: auto;
padding: 0px;
position: absolute;
text-align: left;
width: 400px;
}
div.selectbox-wrapper2 ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
div.selectbox-wrapper2 ul li.selected2 {
background-color: #94b52c;
color: #fff;
}
div.selectbox-wrapper2 ul li.current2 {
background-color: #94b52c;
color: #fff;
}
div.selectbox-wrapper2 ul li {
border-bottom: none;
color: #393939;
cursor: pointer;
display: block;
font-size: 12px;
line-height: 12px;
list-style-type: none;
margin: 0;
padding: 6px 2px 6px 10px;
}
.styledselect_form_1 {
background: url(../images/price-2.jpg) left no-repeat;
border: none;
border-left: none;
color: #393939;
cursor: pointer;
display: block;
font-family: Arial;
font-size: 12px;
height: 24px;
margin: 0px 0px 0px 0px;
padding: 7px 0 0 6px;
text-align: left;
width: 192px;
}