JQuery的兩個下拉列表第二提交負載

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

1. 丹是正確的，當你試圖瞭解發生了什麼時就開始簡單。在表單中放置一個提交按鈕。

2. 你可能做了一些重命名，在此粘貼代碼之前，但因爲我不知道這是肯定，這令我奇怪的是，你的主要選擇列表被命名爲firstOne和你cfif檢查url.filter。

3. 下面的代碼假定標識值是一個nvarchar的類型。如果它是int，則將cf_sql_varchar更改爲cf_sql_integer。如果您不熟悉cfqueryparam，請查看它。它針對旨在改變表/數據庫的sql注入捍衛您的網站。 Read more.

4. 雖然這裏是低於樣本的答案。我會做兩件事情之一。

   • 我會把每個盒子放在它自己的頁面上。
   • 我會用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 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對應於第二個選擇的類。

所以，你可以讓你的第一個選項ID選擇「C＃類別ID＃」，使第二選項類選擇「C＃類別ID＃」。