javascript - 使用当前选定的项目实现自动建议/选择 UI+ 单独的 div

Question

我想构建一个用户界面，用户可以在其中选择多个产品，然后将这些产品显示给用户，然后对这些选定的产品进行各种计算。所以:

• div1:用户选择产品的区域
• div2:显示当前产品选择
• div3:结果(显示用户选择的计算结果)

我主要是一个后端 PHP 程序员，绝不是前端程序员的 JS 程序员，因此 jQuery、JavaScript 的细微差别或它们的工作知识等都不是我的专业领域。我也许可以在没有 JS 的情况下实现这个，并且让它工作，而不需要所有的动态内容。也许不会那么立竿见影，但它会起作用。尽管如此，这是一个尝试动态内容的好机会，当谈到 JS 的世界时，我认为必须从某个地方开始。

我认为理想情况下，这可以通过使用 div1 中的 autosuggest->select 小部件来实现，我可以在其中从数据库预加载现有产品。然后，div2 中的内容显示当前用户的选择。 div3 中的结果可以使用 JS 即时计算，但由于大部分计算是在 PHP 中完成的，我想我将在后端进行这些计算，并通过 AJAX 或通过页面重新加载(表单提交)显示结果。

因此，虽然我认为我可以使其完全动态(又名 JS)，但将现有 PHP 代码重写为 JS 可能并不完全有益。

问题:我如何做 UI 来支持 div1 和 div2 的功能，请记住我不是 JS 或 jQuery 专家。如何通过 POST 将这些选择传送到我的 PHP 脚本？之后，我的意图是重新加载页面并在 div3 中显示结果，保持 div1/div2 与用户在页面重新加载之前留下的内容相同。我

Answer 1

使用 jQuery 和 Ajax 调用来实现这一点。你需要遵循这样的事情 -

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

展示如何完成整个事情需要很多代码，让我向您展示一些对您有帮助的引用 -

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

希望这有帮助。