Question

我已经在下拉列表中应用了脚本，以便时尚外观和风格正确应用，但在.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;
}

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

您已在下拉菜单中指定了styledselect_form_1。那么为什么你再次在ddl中添加styledselect_form_1类抛出jquery？删除下面这行，然后检查

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

<强>更新

你迷失了表格标签。下拉控件应该在表单标签内部使用

在下拉列表中应用样式后，OnSelectedIndexChanged无法正常工作

2 个答案: