Solved

Use two parrs dependent drop down lists in a page

Posted on 2009-03-30
4
163 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 500 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

Want Experts Exchange at your fingertips?

With Experts Exchange’s latest app release, you can now experience our most recent features, updates, and the same community interface while on-the-go. Download our latest app release at the Android or Apple stores today!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
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…
Suggested Courses

632 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