Use two parrs dependent drop down lists in a page

<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?
LVL 2
PanosAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

azadisaryevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
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>
PanosAuthor Commented:
ok i made it
Thank you
PanosAuthor Commented:
Thank you again
It was easier than i thought
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.