coldfusion - JQuery Two dropdowns second submits on load -

coldfusion - JQuery Two dropdowns second submits on load -

i have 2 dropdowns / list boxes, on first submit, page queries database , pulls possible options. trying have sec dropdown on load pull / display results. going in circles.

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 --</option> <option value="state">state</option> </select> <cfif isdefined( "url.filter") , url.filter neq ""> <cfif url.filter eq 'state'> <cfquery name="qrystate"> select distinct state database </cfquery> <select id="secondone" name="filtertwo"> <cfoutput query="qrystate"> <option value="state">state</option> </cfoutput> </select> </cfif> </cfif>

thanks.

dan right, start simple when you're trying understand what's going on. place in submit button in form.

you did renaming before pasting code here, since can't know sure, strikes me odd primary select list named firstone , cfif checks url.filter.

the code below assumes identifier value nvarchar type. if it's int, alter cf_sql_varchar cf_sql_integer. if you're not familiar cfqueryparam, up. defends site against sql injections aimed @ altering tables/databases. read more.

while here's sample reply below.. 1 of 2 things.

i set each box on it's own page. i jquery or javascript, since it's exclusively possible it. i'll share implementation wrote below.

you can seek this

<form method="post" action="boxes.cfm"> <select id="firstone" name="filterone"> <option value="all">-- show --</option> <option value="state">state</option> </select> <cfif isdefined("form.firstone") , form.firstone eq 'state'> <cfquery name="qrystate"> select distinct state database 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>

the script:

$(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(); });

the way works id of first select corresponds class of sec select.

so create id of options of first select "c#categoryid#" , create classes of options of sec select "c#categoryid#".

jquery coldfusion listbox