2

我已经在下拉列表上应用了脚本以获得时尚的外观和样式，但在 .cs 页面（代码页）中，下拉列表的 OnSelectedIndexChanged 无法正常工作。

我的html代码是： 

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

我的源代码是：

protected void ddprice_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Redirect("index.aspx");
}

我在 css 类名 screen.css 中的脚本是

/*  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;
}
4

2 回答 2

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>
于 2013-05-31T06:55:58.390 回答
0

您已经在下拉列表中指定了 styledselect_form_1。那么为什么在 ddl throw jquery 中再添加一次 styledselect_form_1 类？删除下面的行，然后检查

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

更新

你误会了表单标签。下拉控件应该用在表单标签里面

于 2013-05-31T06:14:23.037 回答