none
一个关于dropdownlist 的问题! RRS feed

  • 问题

  • 如下:
    根据客户意向筛选:
                   <asp:DropDownList ID="droplist" runat="server">
                    <asp:ListItem Text="请选择..." Value="0"></asp:ListItem>
                    <asp:ListItem Text="确定缴费" Value="2"></asp:ListItem>
        <asp:ListItem Text="考虑一下" Value="1"></asp:ListItem>
                    <asp:ListItem Text="没意向" Value="-1"></asp:ListItem>
                   </asp:DropDownList> 


    <div name='traceitem' value='" + GetTraceStatus(row) + "' >


    我想通过 js 来控制dropdownlist 的选择,例如选择的是 确定缴费(Value="2"), 而 div 里的值value(GetTraceStatus(row))正好是 2 就显示  不是  就隐藏。


    怎么实现 ? 多谢了



    补充: 等于是一个数据集合 , div 的 value 值是动态绑定的 , 现在数据已经全部出来了 , 只是按照dropdownlist 选择值对应的显示对应的值,不是的就隐藏  初始的时候  就是刚加载的时候 是全部数据都有显示的 。



    答案:function GetTraceStatus(e)
      {
                var items = document.getElementsByTagName("DIV");
       for(var i =0;i < items.length;i++)
       {
        if(items[i].name =='traceitem')
        {
          if(e.value == '0')
          {
           items[i].style.display='';
          }
          else
          {
           if(e.value == items[i].value) items[i].style.display='';
           else  items[i].style.display='none';
          }
        }
       }
      }
    2009年9月15日 1:15

答案

  • 你好,给你一个简单示例,使用 js 根据 下拉选项的值来动态显示与隐藏 table 中符合条件的行
    ---------------------------------------------------------------------------------------------
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:DropDownList ID="droplist" onchange="GetTraceStatus(this)" runat="server">
            <asp:ListItem Text="显示所有" Value="0"></asp:ListItem>
            <asp:ListItem Text="显示第一列为 1 的行" Value="1"></asp:ListItem>
            <asp:ListItem Text="显示第一列为 2 的行" Value="2"></asp:ListItem>
        </asp:DropDownList> 
        <table id="table1">
            <tr><td>col1</td><td>col2</td></tr>
            <tr><td>1</td><td>1</td></tr>
            <tr><td>1</td><td>2</td></tr>
            <tr><td>2</td><td>3</td></tr>
            <tr><td>2</td><td>4</td></tr>
        </table>
    
        <script type="text/javascript">
            function GetTraceStatus(e) {
                var selectedValue = e.options[e.selectedIndex].value;
                var tb = document.getElementById("table1");
                for (var i = 1; i < tb.rows.length; i++) {
                    if (selectedValue == "0" || selectedValue == tb.rows[i].cells[0].innerText)
                        tb.rows[i].style.display = "";
                    else
                        tb.rows[i].style.display = "none";
                }
            }
        </script>
        </form>
    </body>
    </html>
    


    知识改变命运,奋斗成就人生!
    • 已标记为答案 Big-Yellow 2009年9月15日 3:55
    2009年9月15日 2:12
    版主

全部回复

  • <asp:DropDownList ID="droplist" onchange="GetTraceStatus(this)" runat="server">
        <asp:ListItem Text="请选择..." Value="0"></asp:ListItem>
        <asp:ListItem Text="确定缴费" Value="2"></asp:ListItem>
        <asp:ListItem Text="考虑一下" Value="1"></asp:ListItem>
        <asp:ListItem Text="没意向" Value="-1"></asp:ListItem>
    </asp:DropDownList> 
    <div id='traceitem'>
    
    <script type="text/javascript">
        function GetTraceStatus(e) {
            if (e.options[e.selectedIndex].value == 2) 
                document.getElementById("traceitem").innerHTML = e.options[e.selectedIndex].text;
            else 
                document.getElementById("traceitem").innerHTML = "";
        }
    </script>
    2009年9月15日 1:29
    版主
  • <asp:DropDownList ID="droplist" onchange="GetTraceStatus(this)" runat="server">
    
        <asp:ListItem Text="请选择..." Value="0"></asp:ListItem>
    
        <asp:ListItem Text="确定缴费" Value="2"></asp:ListItem>
    
        <asp:ListItem Text="考虑一下" Value="1"></asp:ListItem>
    
        <asp:ListItem Text="没意向" Value="-1"></asp:ListItem>
    
    </asp:DropDownList> 
    
    <div id='traceitem'>
    
    
    
    <script type="text/javascript">
    
        function GetTraceStatus(e) {
    
            if (e.options[e.selectedIndex].value == 2) 
    
                document.getElementById("traceitem").innerHTML = e.options[e.selectedIndex].text;
    
            else 
    
                document.getElementById("traceitem").innerHTML = "";
    
        }
    
    </script>
    
    

    版主你好,我的JS是一窍不通,我想多问下,我的div 里是一个数据的绑定,有N条数据,初始是全部都显示的,当我选择了DropDownList 之后  就根据我筛选的对应值来显示。。。要怎么弄  多谢了@!
    尽早踏入MVP的行列!
    2009年9月15日 1:42
  • 你好,你可以通过 DropDownList.SelectedIndexChanged 事件中,获取 DropDownList 选中的信息,将这些信息带入到 SQL 语句中重新获取数据源,再重新绑定你的控件
    知识改变命运,奋斗成就人生!
    2009年9月15日 1:46
    版主
  • 你好,你可以通过 DropDownList.SelectedIndexChanged 事件中,获取 DropDownList 选中的信息,将这些信息带入到 SQL 语句中重新获取数据源,再重新绑定你的控件
    知识改变命运,奋斗成就人生!

    可是一定要用js 啊 。 内容是全部显示的, 只是把没有的隐藏掉 。
    尽早踏入MVP的行列!
    2009年9月15日 1:52
  • 你好,给你一个简单示例,使用 js 根据 下拉选项的值来动态显示与隐藏 table 中符合条件的行
    ---------------------------------------------------------------------------------------------
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:DropDownList ID="droplist" onchange="GetTraceStatus(this)" runat="server">
            <asp:ListItem Text="显示所有" Value="0"></asp:ListItem>
            <asp:ListItem Text="显示第一列为 1 的行" Value="1"></asp:ListItem>
            <asp:ListItem Text="显示第一列为 2 的行" Value="2"></asp:ListItem>
        </asp:DropDownList> 
        <table id="table1">
            <tr><td>col1</td><td>col2</td></tr>
            <tr><td>1</td><td>1</td></tr>
            <tr><td>1</td><td>2</td></tr>
            <tr><td>2</td><td>3</td></tr>
            <tr><td>2</td><td>4</td></tr>
        </table>
    
        <script type="text/javascript">
            function GetTraceStatus(e) {
                var selectedValue = e.options[e.selectedIndex].value;
                var tb = document.getElementById("table1");
                for (var i = 1; i < tb.rows.length; i++) {
                    if (selectedValue == "0" || selectedValue == tb.rows[i].cells[0].innerText)
                        tb.rows[i].style.display = "";
                    else
                        tb.rows[i].style.display = "none";
                }
            }
        </script>
        </form>
    </body>
    </html>
    


    知识改变命运,奋斗成就人生!
    • 已标记为答案 Big-Yellow 2009年9月15日 3:55
    2009年9月15日 2:12
    版主