Question

我有两个下拉列表/列表框，在第一次提交时，页面查询数据库并撤回可能的选项。我试图在负载拉回/显示结果的第二个下拉列表。但是我要去看看。

JQuery的

$(function() {
    $('#firstOne').change(function() {
        this.form.submit();
    });
});
$(function() {
    $('#secondOne').change(function() {
        this.form.submit();
     });
});

CFML

 <select id="firstOne" name="filterOne">
  <option value="All">-- Show All --</option>
  <option value="State">State</option>
</select>
<cfif IsDefined( "URL.filter") AND URL.filter NEQ "">
  <cfif URL.filter EQ 'State'>
    <cfquery name="qryState">
      SELECT DISTINCT state FROM Database
    </cfquery>
    <select id="secondOne" name="filterTwo">
      <cfoutput query="qryState">
        <option value="state">state</option>
      </cfoutput>
    </select>
  </cfif>
</cfif>

感谢。

Answer 1

Dan是对的，当你试图了解正在发生的事情时，从简单开始。放在表单中的提交按钮。
您可能会在粘贴代码之前进行一些重命名，但由于我无法确切知道，因为您的主要选择列表名为firstOne而您的cfif很奇怪检查url.filter。
以下代码假定标识符值为nvarchar类型。如果是int，则将cf_sql_varchar更改为cf_sql_integer。如果您不熟悉cfqueryparam，请查阅。它保护您的站点免受旨在改变表/数据库的SQL注入。 Read more.
虽然这里有一个示例答案，但我会做两件事之一。
- 我会将每个方框放在它自己的页面上。
- 我会用jQuery或Javascript来做这件事，因为它完全可以用它。我将分享下面写的实现。

你可以试试这个

<form method="post" action="boxes.cfm">
    <select id="firstOne" name="filterOne">
        <option value="All">-- Show All --</option>
        <option value="State">State</option>
    </select>
    <cfif IsDefined("form.firstone") and form.firstone EQ 'State'>
        <cfquery name="qryState">
            SELECT DISTINCT state FROM Database
            WHERE SomethingID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#form.firstone#">
        </cfquery>
        <select id="secondOne" name="filterTwo">
        <cfoutput query="qryState">
            <option value="state">state</option>
        </cfoutput>
        </select>
    </cfif>
    <input type="submit" name="submit" value="Filter Data">
</form>

HTML for JQuery demonstration

<div class="prodselectbox">
    <div id="box1">Category:
        <select id="selectcat" name="categoryselected">
            <option value="" class="rhth">Select Type</option>
            <option value="colors">Colors</option>
            <option value="books">Books</option>
            <option value="animals">Animals</option>
            <option value="furniture">Furniture</option>
        </select>
    </div>
    <div id="box2">Items: <select id="selectprod" name="articleID">
            <option value="">Select SubType</option>
            <option value="red" class="colors">red</option>
            <option value="blue" class="colors">blue</option>
            <option value="bible" class="books">bible</option>
            <option value="phonebook" class="books">phonebook</option>
            <option value="cat" class="animals">cat</option>
            <option value="dog" class="animals">dog</option>
        </select>
    </div>
</div>

剧本：

$(document).ready(function () {
    $('#selectcat').change(function () {
        if ($('option:selected', this).attr('value') == '') {
            $('#box2').hide();
            $('#selectprod option').hide();
        } else {
            if ($('#selectprod option.'+$('option:selected', this).attr('value')).length > 0) {
                $('#selectprod option').hide();
                $('#box2').show();
                $('#selectprod option.'+$('option:selected', this).attr('value')).show();
            } else {
                $('#selectprod option').hide();
                $('#box2').hide();
                alert('No items in category');
            }
        }

    });
    $('#box2').hide();
    $('#selectprod option').hide();
});

这种方法的工作方式是第一个选择的ID对应于第二个选择的类。

因此，您可以为第一个选择＆＃34; c＃CategoryID＃＆＃34;的选项制作您的ID。并制作第二个选项＆＃34; c＃CategoryID＃＆＃34;。

JQuery Two下拉列表第二次提交加载

1 个答案: