使用 ColdFusion、jQuery 和 Ajax 填充第二个下拉列表

问题描述

我有一个包含 14 个值的下拉菜单.根据选择的值，它将查询 SQL Server 数据库并返回一些客户端以显示在第二个下拉列表中.

I have one dropdown that has 14 values. Depending on the value chosen, it'll query a SQL Server database and return some clients to display in a second dropdown.

我希望第二个下拉菜单使用 jQuery Multiselect 小部件，其中每个值都有一个复选框可供选择.

I want that 2nd dropdown to use the jQuery Multiselect Widget where each value has a checkbox to select.

这是我最后一次尝试做的事情，但它不起作用.

Here is what I last tried to do, and it just doesn't work.

    <form>
        <label for="lstTiers">Tier:</label>
        <select name="lstTiers" id="lstTiers">
            <option value="1">Tier 1</option>
            <option value="2">Tier 2</option>
            <option value="3">Tier 3</option>
            <option value="4">Tier 4</option>
            <option value="5">Tier 5</option>
            <option value="6">Tier 6</option>
            <option value="7">Tier 7</option>
            <option value="8">Tier 8</option>
            <option value="9">Tier 9</option>
            <option value="10">Tier 10</option>
            <option value="11">Tier 11</option>
            <option value="12">Tier 12</option>
            <option value="13">Tier 13</option>
            <option value="14">Tier 14</option>
        </select>
        <label for="lstClients">Client:</label>
        <select name="lstClients" id="lstClients">
        </select>
        <input type="button" name="click_me" id="click_me" value="Click Me" />
    </form>

这是对 jQuery 的一次尝试:

Here is one attempt at the jQuery:

        $('#click_me').click(function() { alert('here');
            $.ajax({
                url: 'Ajax-test.cfc?method=returnSomething',
                data: {
                    Tier: $('#lstTiers').val()
                },
                cache: false,
                dataType: 'json',
                success: function(data) {
                    $('#lstClients').html(data);
                },

                // This fires when an error with ColdFusion occurs
                error: function() {

                    alert('An error has occured!');

                }

            });

        }); // End click()

我还尝试了其他一些 jQuery，我在其中循环并构建了选项.

I had also tried some other jQuery where I looped and built the options.

最后，这是我的 cfc 文件:

Finally, here's my cfc file:

<cfcomponent output="false">
    <cffunction access="remote" name="returnSomething" returntype="query" returnformat="json">
        <cfargument name="Tier" type="string" required="yes">
        <cfquery name="qryGetClients" datasource="ProjectGrid_Test">
            SELECT Div, ClientName FROM tblClientUpgradeClients WHERE Tier = #arguments.Tier# ORDER BY Div
        </cfquery>
        <cfreturn qryGetClients>
    <cffunction>
</cfcomponent>

如果可能，返回的下拉菜单应允许用户使用复选框进行多选.我玩过 jQuery Multiselect 小部件并且我已经让它工作了，但不是在这个动态查询上.

If possible, that returned dropdown should allow user to multiselect using a checkbox. I've played with the jQuery Multiselect widget and I've had it work, but not on this dynamic query.

$('#lstClients).multiselect(
        {   noneSelectedText:"All Selected",
            show: ["fade"],
            hide: ["fade"],
            selectedList: 1,
            multiple: true,
            uncheckAllText: ["Clear"]
        });

推荐答案

使用cfcomponent和cfselect标签试试.

Try that using cfcomponent and cfselect tag.

下面的链接可能有用.

http://forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-2-Related-Selects

这篇关于使用 ColdFusion、jQuery 和 Ajax 填充第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！