Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can You Ever Really Dynamically Load Select Boxes

Status
Not open for further replies.

soho34

IS-IT--Management
Joined
Dec 28, 2004
Messages
102
Location
US
Hi,

Classic case of wanting to populate Select Box #2 with Select Box #1 - of course can't do it easily......

Here's my code that I modified from a tutorial out on:

Here, he's trying to populate a second City box based on a Select of a state. I want to populate a Vendors box based on a select of a Service.

Code:
<!--- get vendor/service query --->
<cfquery name="vendor_services" datasource="#request.dsn#">
		select distinct
			st.description,
			v.name as vendor
		from servicetypes st left join
			vendortypes vt on st.servicetypesid = vt.servicetypeid left join
			vendors v on vt.vendorid = v.vendorid
		order by description asc
</cfquery>

<cfdump var="#vendor_services#">

<!--- all services --->
<cfquery dbtype="query" name="allServices">
        select distinct 
			description
		from vendor_services 
		order by description asc
</cfquery>
<cfdump var="#allServices#">



<body>


	<script type="text/javascript">
       <!--
	   var NumberOfServices=document.vendor_service.service_id.options.length;
       var VendorServiceArray=new Array(NumberOfServices);
	   
       VendorServiceArray[0]=new Array();
       VendorServiceArray[0][0]=new Option("select a vendor...","");
      
      <cfloop index="i" from="1" to="#allServices.recordcount#">
              VendorServiceArray[<cfoutput>#i#</cfoutput>]=new Array();
              <cfquery name="selectedVendor_Services" dbtype="query">
                     select vendor from vendor_services where description = '#allServices.description[i]#' order by vendor asc
              </cfquery>
              <cfoutput query="selectedVendor_Services">
           VendorServiceArray[#i#][#selectedVendor_Services.CurrentRow#]=new Option('#JSStringFormat(selectedVendor_Services.vendor)#','#JSStringFormat(selectedVendor_Services.vendor)#');
              </cfoutput>
       </cfloop>
	   
	   function redirect(x){
	   for (m=document.vendor_service.vendor.options.length-1;m>0;m--)
	   document.vendor_service.vendor.options[m]=null
	   for (i=1;i<VendorServicearray[x].length;i++){
	   document.vendor_service.vendor.options[i]=new Option(VendorServiceArray[x][i].text,VendorServiceArray[x][i].value)
	   }
	   document.vendor_service.vendor.options[0].selected=true
	   }
	   
	   
 	   //var temp=document.vendor_service.vendor;
       function FindVendors(PickedService){
	  
	   alert('made it to the mf');
	   alert(PickedService);
	   
	   for (m=document.vendor_service.vendor.options.length-1;m>0;m--)
	   
       	   document.vendor_service.vendor.options[m]=null
	       for (i=1;i<VendorServiceArray[PickedService].length;i++){
       			document.vendor_service.vendor.options[i]=new Option(VendorServiceArray[PickedService][i].text,VendorServiceArray[PickedService][i].value)
       		} //inner for
       	   document.vendor_service.vendor.options[0].selected=true
		   
		   } //function
	  
  
	  
       //-->

	</script>




<form name="vendor_service" action="test.cfm" method="post">
Service:
<SELECT NAME="service_id" SIZE="1" onChange="FindVendors(this.options.selectedIndex);">
   <OPTION VALUE="">Select a service...</OPTION>
      <CFOUTPUT QUERY="allServices">
          <OPTION VALUE="#description#">#description#</OPTION>
      </CFOUTPUT>
</SELECT>

Vendor:
<SELECT NAME="vendor" SIZE="1">
	<OPTION VALUE="">Select a vendor...</OPTION>
</SELECT>

</form>





</body>

I've been trying to figure this out for a couple of weeks and more than a little frustrated.

I'm able to load my services in the first box, but the second select box doesn't even try to load up. Followed the tutorial to the T, but I think I'm having trouble with the placement of my code.


Thanks in advance for any help.

soho34
 
All right, let's stay client-side for the moment.
Here is a sample page:
Code:
<html>
<head>
<title>Vendors</title>
<script type="text/javascript">
<!--

var selvals = new Array();
selvals["vend1"] = new Array();
selvals["vend1"][0] = "vend1 - service1";
selvals["vend1"][1] = "vend1 - service2";
selvals["vend1"][2] = "vend1 - service3";
selvals["vend2"] = new Array();
selvals["vend2"][0] = "vend2 - service1";
selvals["vend2"][1] = "vend2 - service2";
selvals["vend3"] = new Array();
selvals["vend3"][0] = "vend3 - service1";
selvals["vend3"][1] = "vend3 - service2";
selvals["vend3"][2] = "vend3 - service3";

function fillSelect(f)
{
  var src = f.elements["vendor"];
  var v = src.options[src.selectedIndex].value;
  var targ = f.elements["services"];
  targ.options.length = 0;
  var opts = selvals[v];
  for (var i=0; i<opts.length; i++)
  {
    var opt = new Option(opts[i], opts[i]);
    targ.options[i] = opt;
  }
}

// -->
</script>
</head>
<body>
<form name="f">
 Select a vendor:<br>
 <select name="vendor" onchange="fillSelect(this.form);">
  <option name="vend1">vend1</option>
  <option name="vend2">vend2</option>
  <option name="vend3">vend3</option>
 </select><br>
 <select name="services">
 </select>
</form>
</body>
</html>
Does that help?

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top