Link to home
Start Free TrialLog in
Avatar of lulu50
lulu50Flag for United States of America

asked on

A problem with my drop down list

Hi,

this is my site:
http://www.churchesbulletin.com/post.cfm?s=CT&CHID=11

I am working with the
Search by city menu

the problem that I am having is when I click on the "Search by city" menu

-Have the option "Select a State" selected
-you will see the drop down box for "Select a city" empty

when I select a state from the list the select a city drop list will get populated.

if you look at the list it will automatically select the first city that is on the list.

what I want is to add a new option that says "select a city" then display the rest of list.

Avatar of Rajkumar Gs
Rajkumar Gs
Flag of India image

Once you bind dropdownlist, add one more item to the dropdownlist with index as zero(0) - This will display it as the first item.

Raj
Or
In the query itself, fetch in such a way that it contains the value 'select a city' and index value as 0

Something like this
SELECT 0, 'Select a City'
UNION
SELECT CityID, CityName FROM City

Open in new window


Then no need to do the first suggestion.

Raj
Avatar of lulu50

ASKER

RajkumarGS:

no, it didn't work

I have to add this option somewhere in the javascript code but I don't know where or how
Can you post relevant code ?
Raj
Avatar of lulu50

ASKER



function setCityOptionsCT(theSel,fldNameFilter,fldNameTarget){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
 var theFilter = escape(theForm[fldNameFilter].value.replace(/(^\s*|\s*$)/g,""));
  var theRequest = 'getOptCityName.cfm?selval='+theSel.value+'&filter='+theFilter;
  getSelOptions(theRequest,theForm[fldNameTarget]);
}  


getOptCityName.cfm

has this code to populate the city

<cfsetting showDebugOutput="No">
<cfif isDefined("URL.selval") >
<CFQUERY DATASOURCE="xx" NAME="GetCities" cachedwithin="#createTimeSpan(0,0,0,-1)#">
  
  SELECT distinct CityID, CityName FROM CityTbl
         WHERE StateID = #URL.selval# 
		 <cfif isDefined("URL.filter") AND URL.filter GT "" >
		    AND LCASE(CityName) LIKE '#LCase(URL.filter)#%'
		 </cfif>
        order by CityName ASC
</CFQUERY>
  <cfset arrSep="">
  [<cfoutput query="GetCities" >
    #arrSep#["#CityID#","#CityName#"]
	<cfset arrSep=",">
  </cfoutput>]
</cfif>

_____________________________________________


function getSelOptions(theRequest,theTarget){
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  theRequest=theRequest+"&t="+(new Date()).getTime();
  xmlhttp.open("GET",theRequest,false);
  xmlhttp.send();
  newOpt=[];
  var respOpt=xmlhttp.responseText.split('<!-- " --->')[0].replace(/^\s*[\n\r]*$/gm,"");
  if(respOpt){
    newOpt=eval(respOpt);
  }
  var opt = theTarget.options;
  opt.length=0;
  
if(theTarget.name == "GetCityCT") {
  opt[0] = new Option("Select a City","0");
}
else if(theTarget.name == "GetCity") {
  opt[0] = new Option("Select a City","0");
}
else if(theTarget.name == "GetChurch")  {
  opt[0] = new Option("Select a church","0");
}

  var selPar = window[fldMap[theTarget.name]];
  for(var i=0;i<newOpt.length;i++){
    if(newOpt[i][0]==selPar){
      window[fldMap[theTarget.name]]="";
      opt[i] = new Option(newOpt[i][1],newOpt[i][0],true,true);
    } else {
      opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
    }
  }
}

Open in new window

Avatar of lulu50

ASKER

I think in this function is where I have to add the option when the list is populated




function getSelOptions(theRequest,theTarget){
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  theRequest=theRequest+"&t="+(new Date()).getTime();
  xmlhttp.open("GET",theRequest,false);
  xmlhttp.send();
  newOpt=[];
  var respOpt=xmlhttp.responseText.split('<!-- " --->')[0].replace(/^\s*[\n\r]*$/gm,"");
  if(respOpt){
    newOpt=eval(respOpt);
  }
  var opt = theTarget.options;
  opt.length=0;
  
if(theTarget.name == "GetCityCT") {
  opt[0] = new Option("Select a City","0");
}
else if(theTarget.name == "GetCity") {
  opt[0] = new Option("Select a City","0");
}
else if(theTarget.name == "GetChurch")  {
  opt[0] = new Option("Select a church","0");
}

  var selPar = window[fldMap[theTarget.name]];
  for(var i=0;i<newOpt.length;i++){
    if(newOpt[i][0]==selPar){
      window[fldMap[theTarget.name]]="";
      opt[i] = new Option(newOpt[i][1],newOpt[i][0],true,true);
    } else {
      opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
    }
  }
}

Open in new window

Avatar of lulu50

ASKER

this will add new option when the list is not populated I need to do the same thing when the list is populated

if(theTarget.name == "GetCityCT") {
  opt[0] = new Option("Select a City","0");
}
else if(theTarget.name == "GetCity") {
  opt[0] = new Option("Select a City","0");
}
else if(theTarget.name == "GetChurch")  {
  opt[0] = new Option("Select a church","0");
}
Try change query like this ?
 SELECT distinct CityID, CityName FROM (SELECT 0 AS CityID, 'Select a City' AS CityName UNION SELECT CityID, CityName FROM CityTbl)
         WHERE StateID = #URL.selval#
             <cfif isDefined("URL.filter") AND URL.filter GT "" >
                AND LCASE(CityName) LIKE '#LCase(URL.filter)#%'
             </cfif>
        order by CityName ASC
Avatar of lulu50

ASKER

RajkumarGS:

I made the changes now it's not populating the city based on the selected state
Please clarify - Can you see 'Select a City' in the dropdown now at top  ?
Avatar of lulu50

ASKER

RajkumarGS:

I do see the 'Select a City' on top but the rest of my list disappeared
ASKER CERTIFIED SOLUTION
Avatar of Rajkumar Gs
Rajkumar Gs
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
Avatar of lulu50

ASKER

It works !!!!

thank you RajkumarGS:
Avatar of lulu50

ASKER

Thank you
Welcome :)