After applying style on dropdown, OnSelectedIndexChanged not working

Question

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 is :

<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;
}

Answer 1

<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">

             $(function () {
       $("[id*=ddprice]").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>

Answer 2

You have already assigned styledselect_form_1 in dropdown. so why you add the styledselect_form_1 class one more time in ddl threw jquery ?remove this below line ,then check

<script type="text/javascript">
        $(document).ready(function () {
        $('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
         });
</script>

Update

You miised the form tag . The dropdown control should be used in inside of form tag

After applying style on dropdown, OnSelectedIndexChanged not working

Question

2 answers

solution1
1 2013-05-31 06:55:58

solution2
0

After applying style on dropdown, OnSelectedIndexChanged not working

Question

2 answers

solution1 1 2013-05-31 06:55:58

solution2 0

solution1
1 2013-05-31 06:55:58

solution2
0