php 通过 JQuery Onclick 将值传递给函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18932259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing values into a function via JQuery Onclick
提问by Kenneth .J
AIM
目的
I'm trying to create a form that lets users select an item, and then displays the item's details once the user has selected an item. However, before i do that, i am trying to test if it would be possible by creating a simple testpage which replaces the item details to be displayed with a simple alert
我正在尝试创建一个表单，让用户选择一个项目，然后在用户选择一个项目后显示该项目的详细信息。但是，在我这样做之前，我试图通过创建一个简单的测试页面来测试是否有可能，该页面将要显示的项目详细信息替换为简单的警报
Code(JQuery):
代码（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>
Code(Html):
代码（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>
Problem
问题
When i click 'submititem', the alert pops up successfully, but the values cat,subcat and item are shown as undefined instead of the values that were supposed to be passed through.How would i pass data/values through to the function LoadDetails?
当我单击“submititem”时，警报成功弹出，但值 cat、subcat 和 item 显示为未定义而不是应该传递的值。我如何将数据/值传递给函数 LoadDetails？
Solutions tried:
尝试的解决方案：
I've tried using .bind(), but to no avail.
我试过使用 .bind()，但无济于事。
E.g
例如
var cat=$("#itemcat").val();,
var subcat=$("#itemsubcat").val();,
var item=$("#item").val();,
$("#submititem").bind('click',{param:cat,subcat,item},LoadDetails);
Question:
题：
Would it be possible to use the function LoadDetails to retrieve the item details form my database(through PHP) and then echo it out ?
是否可以使用函数 LoadDetails 从我的数据库中检索项目详细信息（通过 PHP），然后将其回显出来？
回答by L105
To pass a value to a function with an event, the syntax is :
要将值传递给带有事件的函数，语法为：
$("#submititem").bind('click', LoadDetails(cat, subcat, item));
jsFiddlefor exemple.
以 jsFiddle为例。
For your question, your code seems to be only client-side but if you want to load data from your server I suggest you to read this learn jQuery ajax
对于您的问题，您的代码似乎只是客户端，但如果您想从服务器加载数据，我建议您阅读此学习 jQuery ajax
回答by pax162
To get the values selected in the drop downs, you can just do this:
要获取在下拉列表中选择的值，您可以这样做：
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);
}
This is strictly client-side, it doesn't talk to the server.
这是严格的客户端，它不与服务器交谈。
