Question

AIM

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

码（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显示为undefined而不是应该传递的值。如何将数据/值传递给函数LoadDetails？

已尝试解决方案：

我尝试过使用.bind（），但无济于事。

E.g

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

问题：

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

Answer 1

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

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

jsFiddle例如。

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

Answer 2

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

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);    
}

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

通过JQuery Onclick将值传递给函数

2 个答案: