更改基于页面的文本选择列表选择和查询数据而不重新加载页面答案

【问题标题】：Changing text on page based Select list selection and Query data without reloading page更改基于页面的文本选择列表选择和查询数据而不重新加载页面
【发布时间】：2011-05-04 05:44:36
【问题描述】：

我的页面上有一个选择列表，根据选择的项目（每个项目都是一个零件号），页面上描述零件尺寸的文本应该会发生变化。每个零件的尺寸（直径、高度）都以 db 为单位。我正在使用 cfquery 调用查询。

选择列表中的值是我的查询中的部件号。我想我遇到的问题是在不重新加载页面的情况下从查询中获取我需要的信息。

我正在寻找一种方式来表达“我点击了‘选项 2’。从我的查询中获取‘选项 2’的直径和高度，并将这些尺寸放在我的 P 标签中。”

我认为一旦我有了新的维度，JQuery 可以很好地更新文本，但我不确定如何在不重新加载的情况下获得我需要的维度。感谢您的帮助！

【问题讨论】：

好像你是 Ajax 新手，尝试 cfselect，使用 cfselect 值将 cfdiv 或 2x cfinput 绑定到远程 CFC，因为参数也可以（对于 CF8 或更高版本）
亨利，我试过你的方法。更改 cfselect 时，cfdiv 不会更新。

标签： jquery select coldfusion

【解决方案1】：

基本上有两种选择。两者都涉及 JavaScript。

首先是将所有数据存储在一个大的JS数组中。 When the select box's selected item changes, that item is used to find the appropriate item in the array and display it in the appropriate div (or whatever).

第二个选项类似，但不是使用列表的本地副本，而是使用 AJAX 从服务器上的 CFC 中提取文本。

如果有多个选择，我会使用第二个选项。第一个选项会更慢地呈现页面（更多项目，加载更慢），但会更快地响应更改。 AJAX 选项将更快地完成初始页面渲染，但您必须等待服务器访问才能显示文本。请注意，使用 AJAX 选项，您可以让用户在加载文本时执行其他操作。

【讨论】：

【解决方案2】：

我同意 Ben 的第二个选项。我有一个应用程序，它有两个下拉菜单，一个菜单由第一个菜单调用的查询返回的数据填充。

我建议查看 jQuery，因为它更容易使用： jQuery Ajax

对 ColdFusion 页面的调用应该返回一个字符串。这是我使用的 jQuery 示例：

$('#menu1').change(function() {

    <!-- Get the value of the dropdown menu -->    
    var selected = { menu1:$(this) .val()}       


        $.ajax({
            type: "POST",
            url: "the CFM file name",
            dataType: "json",              
            data: selected,
            success: function(response){                  

                <!-- if the response from the database is null set the result to "nothing found", else set it to the response -->
                if (response != "") {                       
                         $("#output").append(response);                                                 




                } else {
                   $("#output").append("nothing found");  
                }                                            

            }//end the success function

        });// end ajax call        

});    //end menu1 change function

我修改了我的代码以使其（希望）更易于理解。我希望这会有所帮助。

【讨论】：

【解决方案3】：

好的，我明白了。我正在使用：

$('#foo').change(function () {
    $.get('getInfo.cfm', function (data) { $('#output').text(data) });
});

在我的 CFM 中，我的返回数据位于 cfoutput 括号中。奇迹般有效！谢谢大家的帮助和建议！

【讨论】：