通过 JQuery Onclick 将值传递到函数中

Passing values into a function via JQuery Onclick

本文关键字：函数 值传 JQuery Onclick 通过      更新时间：2023-09-26

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>

代码（网页）：

 <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>

问题

当我单击"提交项目"时，警报会成功弹出，但值 cat、subcat 和 item 显示为未定义，而不是应该传递的值。如何将数据/值传递给函数 加载详细信息？

尝试过的解决方案：

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

例如

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

问题：

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

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

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

jsFiddle for exemple.

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

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

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

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

相关文章：