Link to home
Start Free TrialLog in
Avatar of jasch2244
jasch2244

asked on

jQuery :selected for options tag

Does anyone have a solution out there for a dynamic option tag that once an option is selected another option tag can appear with data specific options pertaining to the first tag and what was selected?

 I'm looking for a solution that does not use page refreshing... like jquery or javascript but pulling from a coldfusion query.
Avatar of gdemaria
gdemaria
Flag of United States of America image


some coldfusion custom tag exists called "CF_TWOSELECTSRELATED"  
It creates the javascript you need..


http://projects.nateweiss.com/nwdc/workcode.htm

Avatar of jasch2244
jasch2244

ASKER

Thank you for the recomendation but I'm looking to show another option tag only if a certain option is selected in the first tag... I hope that makes sense.

To clarify, I am creating a lead tracking system that when a lead comes in the end user will input data via form, if the lead came in through the internet I want another option tag to appear / show up and  state all of the available internet options the lead could have come from... if the lead was not from the internet the other tag does not show up nor does data get entered into the database.
there are many option for it
http://www.google.co.id/search?sourceid=chrome&ie=UTF-8&q=jquery+dynamic+option

basically there are 2 options:
1. the variables loaded in the page
- if the condition/variables not too many
2. the variables loaded through ajax
- if the condition/variables are just too many to load in the page
You can use coldfusion to do it, example

<cfform>
<!--- Here I am selecting say vendors, and below cfselect will display the family of vendors --->

<select name="vendor" id="vendor_id">
      <option value="1"> abcd </option>
      <option value="2"> defg </option>
</select>

<!--- pass the vendor id selected  above to your component which will query as per vendor id and return back the family details --->

 <cfselect name="vendorfamily" bind="cfc:YourComponent.getfamily({vendor})" class="select"  bindOnLoad="true" id="nbafamily_id">
  </cfselect>

</cfform>
Also remember, you function should have access type as REMOTE and return a 2 dimensional ARRAY.. something like

<cffunction name="getfamily" access="remote" returntype="array">
<cfargument name="vendorname" type="string" required="yes">
    <cfset family = arraynew(2) />
    <cfset k = 1 />
    <cfset family[1][1] = "" />
    <cfset family[1][2] = " --Select -- " />
    
    <cfquery name="getFamilyDetails" datasource="#dsn#">
        select distinct(FAMILY) from exDatabase
        where VENDOR = '#ARGUMENTS.vendorname#'
    </cfquery>
    
    <cfif getFamilyDetails.RECORDCOUNT GTE 1>
    <cfloop query="getFamilyDetails">
    	<cfset k = k + 1 />
    	<cfset family[k][1] = #FAMILY# />
        <cfset family[k][2] = #FAMILY# />
    </cfloop>
    	 <cfset family[k+1][1] = "fOther" />
    	 <cfset family[k+1][2] = "Other" />
    <cfelse>
    	    <cfset family[2][1] = "fOther" />
    	<cfset family[2][2] = "Other" />
    </cfif>
    
    
    <cfreturn family />
</cffunction>

Open in new window

Wow this code is way above my head I'll have to do some research as I've been scared of cfc. Also, with this functionality happen without a page refresh?
Yes, this works without page refresh.

The code is actually very simple,

Step 1 -> Add the select name

Step 2 -> use cfselect and bind it to the selected name in step1.

Step 3 -> Create your component, just remeber select has [name, value] <option value = 1>ABCD</option>, so your query should return an 2 dimensional array.

I have been using it and it works great... let me see if I can pull up a tutorial link for you where you can understand it much better...
ASKER CERTIFIED SOLUTION
Avatar of Brijesh Chauhan
Brijesh Chauhan
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Except for one thing, I don't see anywhere in that code that will hide the 2nd select box.  Brij, if the 2nd select box will be hidden if there are no entries, can you please say what code is doing that.

Otherwise, you might as well go with the custom tag and use javascript so it will work faster.   The benefit to the bind/cfc approach is if the lists are really huge you don't have to load them all at once on the page.  

But in either case, the 2nd select tag will show
gdemaria, no the second box is NOT HIDDEN, the second select tag would show ...initially there would be nothing in there, just --Select -- (see line 5 and 6 of component code), once you select an option in first select tag, it would should the choices pulled from the query.

I have not compared the speeds, but it works great..

The author's requirement is the 2nd select box must be hidden when not needed
brijeshchauhan: your suggestion was greatly appreciated in a perfect world it would be nice to make it appear only if a certain topic was chosen. My use is to track sales leads and only have the other option tag appear if the lead was generated via the internet (selected option). I could probably make your solution work though... I'll play around with it and see what I can do... in the meantime if anyone has a jquery suggestion or example please let me know.
I'm having a couple of problems:
 1.) I can't seem to get the other cfselect to populate, seems like I'm having a binding issue. I copied the code provided in the link above and plugged in my queries ect. If you look at the origonal cfc (art.cfc) looks like they are passing "mediaid" the name of my argument is pk (for primary key) is this an issue.

 2.) If the first cfselect option does not populate the second how do I have a default of the second cfselect = 0 being it is going to have to be inserted into the database and not equal 0. I hope that make sense
//////////////Lead-Related-Selects.cfm//////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<cfform>
<table>
    <tr>
        <td>Select Lead Source:</td>
        <td><cfselect name="Source"
                bind="cfc:LeadSource.getSource()"
                bindonload="true" /></td>
    </tr>
    <tr>
        <td>Select Internet Lead Source:</td>
        <td><cfselect name="InternetSource"
                bind="cfc:LeadSource.getISource({pk})" /></td>
    </tr>
</table>
</cfform>
</body>
</html>

///////////////////LeadSource.cfc////////////////
<cfcomponent output="false">

    <cfset THIS.dsn="MYDSN">

    <!--- Get array of media types --->
    <cffunction name="getSource" access="remote" returnType="array">
        <!--- Define variables --->
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        <!--- Get data --->
        <cfquery name="data" datasource="#THIS.dsn#">
        SELECT pk, Source
        FROM source
        ORDER BY Source
        </cfquery>
        <!--- Convert results to array --->
        <cfloop index="i" from="1" to="#data.RecordCount#">
            <cfset result[i][1]=data.pk[i]>
            <cfset result[i][2]=data.Source[i]>
        </cfloop>
        <!--- And return it --->
        <cfreturn result>
    </cffunction>
    <!--- Get art by media type --->
    <cffunction name="getISource" access="remote" returnType="array">
        <cfargument name="pk" type="numeric" required="true">
        <!--- Define variables --->
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        <!--- Get data --->
        <cfquery name="data" datasource="#THIS.dsn#">
        SELECT theKey,internetSource,sourcePk
        FROM source_internet
        WHERE sourcePk = #ARGUMENTS.pk#
        ORDER BY theKey
        </cfquery>
            <!--- Convert results to array --->
        <cfloop index="i" from="1" to="#data.RecordCount#">
            <cfset result[i][1]=data.theKey[i]>
            <cfset result[i][2]=data.internetSource[i]>
        </cfloop>
        <!--- And return it --->
        <cfreturn result>
    </cffunction>

</cfcomponent>

Open in new window

In the second select, you have to pass the NAME of the first select... that is instead of pk, you have to pass source..

//////////////Lead-Related-Selects.cfm//////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<cfform>
<table>
    <tr>
        <td>Select Lead Source:</td>
        <td><cfselect name="Source"
                bind="cfc:LeadSource.getSource()"
                bindonload="true" /></td>
    </tr>
    <tr>
        <td>Select Internet Lead Source:</td>
        <td><cfselect name="InternetSource"
                bind="cfc:LeadSource.getISource({Source})" /></td>
    </tr>
</table>
</cfform>
</body>
</html>

Open in new window

Well that was an easy fix... even though I don't understand how that works, but that's my issue I will study it. One other thing... I've had to create another feild for the internet source (internetSource) if the user chooses a lead source that is not say internet (print media) and the second cfselect has nothing to pull from how do I enter a value of 0 for "InternetSource" cfselect?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Awesome... works great thank you. I guess down the road I'll create a condtional that will hide the second cfselect if something is not selected... but this will get me up and running. Thank you so much!
jash, just an FYI that you asked for a javascript solution, which I provided in the first post.  But you didn't accept it because it didn't hide the second select tag.  

You ended up accepting a solution that also doesn't hide the second select tag...

The CF ajax solution is a very good one, but equal to the solution I provided.
Glad to help you jash, here is a simple Jquery Solution to hide the second select..

You just need to change the condition 'SOME VALUE' according to your data.. but this should help you

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript"> 
/* <![CDATA[ */ 
$(document).ready(function() { 
$('div.textfield').hide(); 
$('#source).change(function() { 
if ($("#source").val() === 'SOME VALUE' ){ 
$('div.textfield').show(); 
} 
else{ 
$('div.textfield').hide(); 
} 
}); 

Open in new window


Just add ID's in here

<cfform>
<p>Select Lead Source:</p>
        <p><cfselect name="Source" id="Source"
                bind="cfc:LeadSource.getSource()"
                bindonload="true" /></p>
    <div class="textfield">
        <p>Select Internet Lead Source:</p>
        <p><cfselect name="InternetSource"
                bind="cfc:LeadSource.getISource({Source})" /></p>
      </div>
</cfform>

Open in new window