2

目标

我正在尝试创建一个表单，让用户选择一个项目，然后在用户选择一个项目后显示项目的详细信息。但是，在我这样做之前，我试图通过创建一个简单的测试页来测试是否有可能，该测试页用一个简单的警报替换要显示的项目详细信息

代码（jQuery）：

<!--Function to display item details upon selection-->

<script type="text/javascript">
function LoadDetails(cat,subcat,item)
{
    return function(){
    alert("Values are passed through successfully.Category is"+cat+", subcategory is"+subcat+"and item is"+item);
    }
}
</script>

<script type="text/javascript">
$(document).ready(function(){
    $("#itemsubcat").hide();
    $("#item").hide();
    $("#submititem").hide();
    $("#itemcat").load("getcategory.php");

    $("#itemcat").change(function(){
        var cat=$("#itemcat").val();
        $("#itemsubcat").show();
        $("#itemsubcat").load('getsubcategory.php?cat='+cat);
    });

    $("#itemsubcat").change(function(){
        var cat=$("#itemcat").val();
        var subcat=$("#itemsubcat").val();
        $("#item").show();
        $("#item").load('getitem.php?cat='+cat+'&subcat='+subcat);
    });

    $("#item").change(function(){
        $("#submititem").show();
    });
        var cat=$("#itemcat").val();,
        var subcat=$("#itemsubcat").val();,
        var item=$("#item").val();,
    $("#submititem").bind('click',{param:cat,subcat,item},LoadDetails);
    });
});
</script>

代码（HTML）：

 <table>
    <tr>
        <td><select id="itemcat" /></td>
        <td><select id="itemsubcat" /></td>
        <td><select id="item" /></td>
        <td><input type="button" id="submititem" name="submititem" value="Get Item" /></td>
    </tr>
    </table>

问题

当我单击“submititem”时，警报成功弹出，但值 cat、subcat 和 item 显示为未定义，而不是应该传递的值。我如何将数据/值传递给函数 LoadDetails？

尝试的解决方案：

我试过使用 .bind()，但无济于事。

例如

var cat=$("#itemcat").val();,
var subcat=$("#itemsubcat").val();,
var item=$("#item").val();,
$("#submititem").bind('click',{param:cat,subcat,item},LoadDetails);

问题：

是否可以使用函数 LoadDetails 从我的数据库中检索项目详细信息（通过 PHP），然后将其回显？

4

2 回答 2

4

要将值传递给带有事件的函数，语法是： 

$("#submititem").bind('click', LoadDetails(cat, subcat, item));

以 jsFiddle为例。

对于您的问题，您的代码似乎只是客户端，但如果您想从服务器加载数据，我建议您阅读这篇学习 jQuery ajax

于 2013-09-21T12:43:45.770 回答
0

要获取下拉列表中选择的值，您可以这样做：

function LoadDetails()
{
    var cat=$("#itemcat").find(":selected").text();
    var subcat=$("#itemsubcat").find(":selected").text();
    var item=$("#item").find(":selected").text();    
    alert("Values are passed through successfully.Category is"+cat+", subcategory is"+subcat+"and item is"+item);    
}

这是严格的客户端，它不与服务器对话。

于 2013-09-21T12:06:48.317 回答