Question

我想构建一个用户选择多个产品的UI，并向用户显示这些产品，然后对这些选定的产品进行各种计算。所以：

div1：用户选择产品的区域
div2：显示当前产品选择
div3：结果（显示对用户选择的计算结果）

我主要是一名后端PHP程序员，绝不是前端程序员程序员的JS，所以jQuery，JavaScript或其工作知识的细微差别等等都不是我的专业领域。我可以在没有JS的情况下实现这一点，并且让它工作，没有所有动态内容。它可能不是那么直接但它会起作用。虽然，这是一个尝试动态内容的好机会，但当谈到JS的世界时，我想要从某个地方开始。

我认为理想情况下，这可以通过在div1中使用autosuggest-＆gt; select小部件来实现，我可以从DB中预加载现有产品。然后，div2中的某些内容显示当前用户的选择。然后可以使用JS在运行中计算div3中的结果，但由于大部分计算都是在PHP中完成的，因此我将在后端执行这些计算，并通过AJAX或页面重新加载（表单提交）显示结果。

所以，虽然我认为我可以完全动态化（也就是JS），但将现有的PHP代码重写为JS可能并不完全有益。

问题：如何使用UI来支持div1和div2的功能，请记住我不是JS或jQuery的专家。如何通过POST将这些选择传递给我的PHP脚本？之后我的意图是重新加载div3中的结果页面，保持div1 / div2与用户在重新加载页面之前保持一致。我

Answer 1

使用jQuery＆amp; Ajax呼吁实现这一目标。你需要遵循这样的事情 -

将jQuery添加到您的应用程序
为div 1中的产品选择分配一些事件监听器
使用偶数监听器，在div 1中选择某些产品后，将其显示在div 2中的选定项目中。
此时，您可以对您的服务器进行ajax调用，在该服务器中，您的PHP代码可以进行计算。通过Ajax调用发送您选择的产品列表。
服务器然后可以处理东西和使用您需要显示的数据回复您。
您在ajax请求响应中捕获此数据＆amp;然后用这个填充你的div。

显示如何完成整个过程将会有很多代码，让我向您展示一些可以帮助您的参考资料 -

如何开始使用jquery - http://learn.jquery.com/about-jquery/how-jquery-works/
jQuery中的事件处理 - http://learn.jquery.com/events/
Ajax在jQuery中调用 - http://api.jquery.com/jquery.ajax/

希望这有帮助。

Answer 2

因为JS是事件驱动的。我们只需要将事件处理程序附加到产品中。让这成为3个divs

<div id="a">
    <div onclick="show('p1');">p1</div>
    <div onclick="show('p2');">p2</div>
</div>
<div id="b"></div>
<div id="c"></div>

我们已将onclick侦听器附加到每个产品，这将触发show功能

function show(ele) {
    $('#b').html(ele + " was selected");
    $.ajax("http://fiddle.jshell.net/favicon.png").done(function( data ) {
        $('#c').html("data: " + data);
    });
}

它将首先更新div b，然后进行ajax调用并更新div c。你只需要将ajax URL替换为你的php进行处理（并添加一些POST或GET请求参数）这是小提琴：http://jsfiddle.net/5h8RV/4/

使用当前选定的项目实现autosuggest /选择UI +单独的div

2 个答案: