• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

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.

0
lulu50
Asked:
lulu50
  • 8
  • 7
1 Solution
 
Rajkumar GsSoftware EngineerCommented:
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
0
 
Rajkumar GsSoftware EngineerCommented:
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
0
 
lulu50Author Commented:
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
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Rajkumar GsSoftware EngineerCommented:
Can you post relevant code ?
Raj
0
 
lulu50Author Commented:


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

0
 
lulu50Author Commented:
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

0
 
lulu50Author Commented:
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");
}
0
 
Rajkumar GsSoftware EngineerCommented:
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
0
 
lulu50Author Commented:
RajkumarGS:

I made the changes now it's not populating the city based on the selected state
0
 
Rajkumar GsSoftware EngineerCommented:
Please clarify - Can you see 'Select a City' in the dropdown now at top  ?
0
 
lulu50Author Commented:
RajkumarGS:

I do see the 'Select a City' on top but the rest of my list disappeared
0
 
Rajkumar GsSoftware EngineerCommented:
I am more experienced in ASP.Net with C# / Javascript and T-SQL.

But I can give you suggestions.

The line which adds 'Select a City' to dropdownlist
opt[0] = new Option("Select a City","0");

Open in new window

Please paste this line immediately after the line where you are binding the dropdownlist with the SQL Query.

Raj
0
 
lulu50Author Commented:
It works !!!!

thank you RajkumarGS:
0
 
lulu50Author Commented:
Thank you
0
 
Rajkumar GsSoftware EngineerCommented:
Welcome :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now