js和dropdownlist控件实现图片的切换

最新推荐文章于 2021-04-03 17:08:52 发布

原创最新推荐文章于 2021-04-03 17:08:52 发布 · 805 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp #path #function #object #string #数据库

本文介绍如何使用JavaScript配合ASP中的dropdownlist控件，实现在用户选择不同的选项时，页面上的图片进行相应的切换。通过绑定事件和修改图片路径，实现了动态更新图片的功能。涉及到的知识点包括JavaScript函数、字符串操作以及与后台数据的交互。

//js
  function   getData()
  {
                var   ddl=document.getElementById("DropDownList1");
                var   pindex   =   ddl.selectedIndex;
                var   pValue   =   ddl.options[pindex].value;
                var   pText     =   ddl.options[pindex].text;
                document.getElementById("<%=img1.ClientID%>").src='<%=path%>'+pValue+'.jpg';
  }

  //html,其中的Value值可以你的图片名称
  <asp:DropDownList   ID="DropDownList1"   runat="server">
                  <asp:ListItem   Value=1>1</asp:ListItem>
                  <asp:ListItem   Value=2>2</asp:ListItem>
                  <asp:ListItem   Value=3>3</asp:ListItem>
  </asp:DropDownList>


  //cs代码
  public   string   path="";

  private   void   Page_Load(object   sender,   System.EventArgs   e)
  {
                          if(!this.IsPostBack)
  　　                 {
                                  this.DropDownList1.Attributes.Add("onchange","getData();");
                                  path=@"c:/test/";//可以设置物理路径，可以从配置文件读取，也可以从数据库读取
  　　                 }
  }