?
Solved

Use two parrs dependent drop down lists in a page

Posted on 2009-03-30
4
Medium Priority
?
166 Views
Last Modified: 2013-12-24
<script type="text/javascript" src="../js/engine_micro.js"></script>
<cfinvoke component="com.getmodell" method="getHersteller" returnvariable="qHersteller">
</cfinvoke>
<cfinvoke component="com.getmodell2" method="getHersteller2" returnvariable="qHersteller2">
</cfinvoke>
<script type="text/javascript" src="js/engine_micro.js"></script>
<script language="javascript" type="text/javascript">
function getOptions(ID){
 //set the params required for your function
 if (isNaN(ID) || ID <= 0) ID = 0;
 var param = 'herstellerid='+ID;
 http('POST','com/getmodell.cfc?method=getMenu',showNewOptions_response,param);
}
function showNewOptions_response(obj){
 var mySelect = document.getElementById('S_Modell_ID');
 mySelect.options.length = 0;
 for (var c = 0; c < obj.modell_id.length; c++)
 {
  //note that jsmx calls always return lower case
  mySelect.options[c] = new Option(obj.modell_de[c] , obj.modell_id[c]);
 }      
}
</script>
<script language="javascript" type="text/javascript">
function getOptions(ID){
 //set the params required for your function
 if (isNaN(ID) || ID <= 0) ID = 0;
 var param = 'herstellerid='+ID;
 http('POST','com/getmodell2.cfc?method=getMenu2',showNewOptions_response,param);
}
function showNewOptions_response(obj){
 var mySelect = document.getElementById('S_Modell_ID2');
 mySelect.options.length = 0;
 for (var c = 0; c < obj.modell_id.length; c++)
 {
  //note that jsmx calls always return lower case
  mySelect.options[c] = new Option(obj.modell_de[c] , obj.modell_id[c]);
 }      
}
</script>
<cfparam name="FORM.MAINSELECT" default="">
 
<cfform action="selectajax.cfm" method="get" name="WADASearchForm" id="WADASearchForm">
<!--- this is the primary select, which controls the other one --->
<cfselect name="S_Hersteller_ID"  onchange="getOptions(this.value);">
<option value="" <cfif Form.mainselect EQ "">selected="selected"</cfif>>beliebig</option>
<cfoutput query="qHersteller">
<option value="#Hersteller_ID#" <cfif qHersteller.Hersteller_ID EQ Form.mainselect>selected="selected"</cfif>>#Hersteller_Text#</option>
</cfoutput>
</cfselect>
 
<!--- this is the secondary select, which is changed by the AJAX code --->
<cfselect name="S_Modell_ID" id="S_Modell_ID">
<option value="" selected="selected">Please select a Make first...</option>
</cfselect>
<input name="Search" type="image" class="imageSuchen" id="Search" value="Search" src="../images/search.gif" alt="Search"  />
</cfform><br /><br />
<!--- this is the second primary select, which controls the other one --->
 <cfselect name="S_Hersteller_ID2" class="selectleftbig" id="S_Hersteller_ID2" onchange="getOptions(this.value);">
                       <option value="">beliebig</option>
                         <cfoutput query="qHersteller2">
                                <option value="#qHersteller2.Hersteller_ID#" >#qHersteller2.Hersteller_Text#</option>
                             </cfoutput>
                           </cfselect>
                           <br /><br />
      <cfselect name="S_Modell_ID2" id="S_Modell_ID2" class="selectleftbig">
<option value="" selected="selected">Erst Hersteller w&auml;hlen</option>
</cfselect>
and the two cfc:
<cfcomponent output="false">
 <cffunction name="getHersteller" returntype="query">
  <cfset VAR qHersteller = "">
  <cfquery name="qHersteller" datasource="#request.dsn#">
  SELECT Hersteller_ID, Hersteller_Text
  FROM Hersteller
  WHERE Mobiles_Subs_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="1">
  ORDER BY Hersteller_NR
  </cfquery>
  <cfreturn qhersteller>
</cffunction>
 
 <cffunction name="GetMenu" access="remote" output="false" returntype="query" hint="Returns a query of the submenu items based on the parent menu ID">
  <cfargument name="herstellerid" required="yes" type="numeric" hint="The parent ID of the items to return">
  <cfset var QGetMenu="">
  <cfquery datasource="#request.dsn#" name="QGetMenu">
  SELECT Modell_DE, Modell_ID
  FROM Modell_Auto_S
  WHERE Auto_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="#ARGUMENTS.herstellerid#">
  ORDER BY Modell_NR
  </cfquery>
  <cfreturn QGetMenu>
 </cffunction>
</cfcomponent>
And getmodell2:
<cfcomponent output="false">
 <cffunction name="getHersteller2" returntype="query">
  <cfset VAR qHersteller2 = "">
  <cfquery name="qHersteller2" datasource="#request.dsn#">
  SELECT Hersteller_ID, Hersteller_Text
  FROM Hersteller
  WHERE Mobiles_Subs_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="1">
  ORDER BY Hersteller_NR
  </cfquery>
  <cfreturn qhersteller2>
</cffunction>
 
 <cffunction name="GetMenu2" access="remote" output="false" returntype="query" hint="Returns a query of the submenu items based on the parent menu ID">
  <cfargument name="herstellerid" required="yes" type="numeric" hint="The parent ID of the items to return">
  <cfset var QGetMenu2="">
  <cfquery datasource="#request.dsn#" name="QGetMenu2">
  SELECT Modell_DE, Modell_ID
  FROM Modell_Auto_S
  WHERE Auto_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="#ARGUMENTS.herstellerid#">
  ORDER BY Modell_NR
  </cfquery>
  <cfreturn QGetMenu2>
 </cffunction>
</cfcomponent>

But i suppose as i use for both the same function the scripts do not work fine.
Any help to solve this?
0
Comment
Question by:Panos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 27

Accepted Solution

by:
azadisaryev earned 2000 total points
ID: 24019935
it would not work because your second set of js functions overwrites the first set: you still only have ONE getOptions and ONE showNewOptions_response function that will be called from both your cfselects

you need to create a separate set of js functions for your second related selects set, making sure the functions are NOT named the same as in the first set.

Azadi
0
 
LVL 2

Author Comment

by:Panos
ID: 24019962
Ok azadi
Can youmake the changes in the second javascript file?
<script language="javascript" type="text/javascript">
function getOptions(ID){
 //set the params required for your function
 if (isNaN(ID) || ID <= 0) ID = 0;
 var param = 'herstellerid='+ID;
 http('POST','com/getmodell2.cfc?method=getMenu2',showNewOptions_response,param);
}
function showNewOptions_response(obj){
 var mySelect = document.getElementById('S_Modell_ID2');
 mySelect.options.length = 0;
 for (var c = 0; c < obj.modell_id.length; c++)
 {
  //note that jsmx calls always return lower case
  mySelect.options[c] = new Option(obj.modell_de[c] , obj.modell_id[c]);
 }      
}
</script>
0
 
LVL 2

Author Comment

by:Panos
ID: 24019979
ok i made it
Thank you
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 31564366
Thank you again
It was easier than i thought
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question