Javascript 使用经典asp、jquery和ajax从第一个下拉列表中选择值后,如何显示所选项目的表?

Javascript 使用经典asp、jquery和ajax从第一个下拉列表中选择值后,如何显示所选项目的表?,javascript,jquery,sql,ajax,Javascript,Jquery,Sql,Ajax,我有一个下拉列表,它是从产品表中提取的。现在,我需要显示一个包含产品名称列及其图像的表,但仅当从下拉选项中单击特定的产品类型时。现在,我的代码在页面加载时显示所有产品。该表应显示下拉列表中product=所选产品的值。当前未进行筛选。它展示了所有的产品,我意识到我需要ajax。由于我对ajax非常陌生,我尽了最大努力使它工作得很好,但它不起作用。谁能帮帮我吗?以下是我正在编写的代码: <script> $("#ProdID").change(function(){ v

我有一个下拉列表,它是从产品表中提取的。现在,我需要显示一个包含产品名称列及其图像的表,但仅当从下拉选项中单击特定的产品类型时。现在,我的代码在页面加载时显示所有产品。该表应显示下拉列表中product=所选产品的值。当前未进行筛选。它展示了所有的产品,我意识到我需要ajax。由于我对ajax非常陌生,我尽了最大努力使它工作得很好,但它不起作用。谁能帮帮我吗?以下是我正在编写的代码:

<script>
    $("#ProdID").change(function(){
    var productId = $(this).find('option:selected').val();
    if (productId != '') {
        .ajax({
        async: false,
        type : 'POST',
        url : 'ajax/imageflip.asp',
        data : { productId: productId},
        success : function(responseData) {
        try {
            if (responseData == 1) { //Successful input
                alert("Images shown!");
                $("#wcurdata").html(responseData);
                } else {
                alert("ERROR! No Images!");
                }
                } catch(e) {
            }
                                        }
        });
            } else {
            alert("Please Check the deconstructed Images!");
            }
        });
</script>   

<div id="main">
    <div id="PChoice">
        <% 
        Dim rsbrnd
        SQL = "SELECT DISTINCT(brand) as brand FROM product"
        SET rsbrnd = objConn.Execute(SQL)

        IF NOT (rsbrnd.EOF) THEN

        %>

         Product:
            <select id='ProdID'>
                <option value=1>---- SELECT ----</option>
                <%
                    WHILE NOT rsbrnd.EOF
                        Response.Write "<option value="& rsbrnd("brand")                                    
                        Response.Write ">" & rsbrnd("brand") &"</option>"
                        rsbrnd.MoveNext
                    WEND
                    %>
            </select>
            <% 
                END IF
                rsbrnd.close
                Set rsbrnd = Nothing
                %>
    </div>
    <div id="curtbl">
        <div id="wcurdata">
            <%                                                          
                StrC= "SELECT TOP (200) np.Id, np.imgName, np.brand"&_
                    "FROM NewProduct"&_
                    "WHERE (np.brand = '"& rsbrnd("brand") &"')  

                    set RsC  = Objconn.execute(StrC)
                        IF NOT RsC.EOF THEN                                                         
                            Response.write "<table id= ""details"" width=""100%"" border=1 cellpadding=4 cellspacing=0>"
                                    Response.write "<tr>"   
                                        Response.write "<td align=center>"
                                            Response.write "<font color=#ffffff><b>#</b></font>"
                                        Response.write "</td>"                                      
                                        Response.write "<td align=center>"
                                            Response.write "<font color=#ffffff><b>Name</b></font>"
                                        Response.write "</td>"
                                        Response.write "<td align=center>"
                                            Response.write "<font color=#ffffff><b>Image</b></font>"
                                        Response.write "</td>"
                                    Response.write "</tr>"
                            countc = 1
                            While NOT RsC.EOF  
                                Response.Write "<tr>"
                                        Response.Write "<td align=center>"
                                            Response.Write "<b>"& countc &".</b>"
                                            countc = countc + 1
                                        Response.Write "</td>"
                                        Response.Write "<td align=center>"
                                            Response.Write RsC("imgname")
                                        Response.Write "</td>"
                                        Response.Write "<td align=center><img style= 'height: 65px; width:65px;' src='http://www.example.com/images/products/"& RsC("imgName") &"'>"
                                        Response.Write "</td>"
                                    Response.Write "</tr>"

                                RsC.Movenext
                            Wend                    
                                Response.Write "</table>"
                            END IF
                            RsC.Close
                            Set RsC = Nothing
                %>
        </div>  
    </div>  
</div>                      

从您的描述中,我看不出AJAX调用对于实现您的目标是完全必要的。看起来所有的表数据都可以在页面加载中使用。为了通过“选择”下拉列表对其进行过滤,可以使用良好的旧CSS显示/隐藏相应的行

由于您不希望在页面加载时显示该表,因此只需使用CSS类或内联样式将其隐藏即可:

<div id="curtbl" class="hidden">
现在,您需要在每个表行中使用一个钩子来标识它是哪个产品—我建议使用一个数据属性,因为它是我们要标识的数据。写入行时,添加一个属性:

Response.Write("<tr data-product='" & RsC("imgName") & "' class='hidden'>")

从您的描述中,我看不出AJAX调用对于实现您的目标是完全必要的。看起来所有的表数据都可以在页面加载中使用。为了通过“选择”下拉列表对其进行过滤,可以使用良好的旧CSS显示/隐藏相应的行

由于您不希望在页面加载时显示该表,因此只需使用CSS类或内联样式将其隐藏即可:

<div id="curtbl" class="hidden">
现在,您需要在每个表行中使用一个钩子来标识它是哪个产品—我建议使用一个数据属性,因为它是我们要标识的数据。写入行时,添加一个属性:

Response.Write("<tr data-product='" & RsC("imgName") & "' class='hidden'>")

在ASP中构建表时,您似乎已经从数据库中获取了产品图像以及产品ID—为什么要通过ajax调用新图像?嗨,Josh,这是我需要删除的唯一警告消息,wcurdata是整个表的div。我这么做是想它可能有用。i、 e选择下拉选项后,将显示表格。ya images确实会显示该表工作正常,但它会显示页面加载时的情况。仅当从下拉列表中选择选项时,才应加载该表。如果您不介意在页面加载时加载所有表数据的页面权重,您可以使用CSS隐藏表和行,直到选择一个选项,然后取消隐藏表格和与所选品牌匹配的产品行。不需要ajax。我很抱歉,因为我忘了提到我需要过滤产品名称。换句话说,我只需要显示与下拉式产品匹配的产品行。我编辑了我的问题。这就是我正在努力解决的问题。在ASP中构建表时,您似乎已经从数据库中获取了产品图像以及产品ID-为什么要通过ajax调用新图像?嗨,Josh,这是我需要发送的唯一警报消息,而wcurdata是整个表的div。我这么做是想它可能有用。i、 e选择下拉选项后,将显示表格。ya images确实会显示该表工作正常,但它会显示页面加载时的情况。仅当从下拉列表中选择选项时,才应加载该表。如果您不介意在页面加载时加载所有表数据的页面权重,您可以使用CSS隐藏表和行,直到选择一个选项,然后取消隐藏表格和与所选品牌匹配的产品行。不需要ajax。我很抱歉,因为我忘了提到我需要过滤产品名称。换句话说,我只需要显示与下拉式产品匹配的产品行。我编辑了我的问题。这就是我挣扎的地方。