基于选择列表选择和查询数据更改页面上的文本，无需重新加载页面

Question

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

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

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

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

Answer 1

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

第一个是将所有数据存储在一个大的 JS 数组中。当选择框的所选项目发生更改时，该项目用于在数组中查找适当的项目并将其显示在适当的 div（或其他内容）中。

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

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

Answer 2

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

我建议检查 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

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

Answer 3

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

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

在我的 CFM 中，我将返回数据放在 cfoutput 括号中。效果就像一个魅力！谢谢大家的帮助和建议！