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