Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Select box "Select city"

Posted on 2011-09-30
6
Medium Priority
?
314 Views
Last Modified: 2012-05-12
Hi,

I have a select box that it gets populated based on the selected state.
What i am trying to do is to when the user select the state the select cities will get populated but i want to add an option that says "Select City" then have the list of cities.

Thanks
My version of code that doesn't work is this:

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

___________________________________

this code works well it populate the data based on the selected states but I need to add a default option "Select city" 

function setCityOptionsCT(theSel,fldNameFilter,fldNameTarget){
  
if(theSel.options[theSel.selectedIndex].value == "")
{
 var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
}
else
{
  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]);
}
} 


_____________________________________________

Filter:     
	 <input id="TxtStateCT" name="TxtStateCT" style="width: 142px" type="text" onKeyUp="setStateOptions(this,'DispStateBoxCT');" />

	 <select name="DispStateBoxCT" style="width: 185px;" size="1" 
			   onChange="setCityOptionsCT(this,'TxtCityCT','GetCityCT');"
			   onFocus="this.form.TxtCityCT.value='';" >
			 </select>
			 <cfset strStateListCT="" >
			 <cfloop query="DispState">
			   <cfset strStateListCT=strStateListCT&",['#StateID#','#StateName#']" >
			 </cfloop>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateListCT,2,Len(strStateListCT))#];
			   document.forms.FRMAcc.TxtStateCT.onkeyup();
			 </script>
			 </cfoutput> 

Filter:&nbsp;
			 <input id="TxtCityCT"  name="TxtCityCT" style="width: 142px" type="text" onKeyUp="this.form.DispStateBoxCT.onchange()" />

   <select name="GetCityCT" style="width: 185px;" size="1" /> </select>

		<select name="SelSTPostCT" size="1" style="width: 185px;"
	onChange="setOptionsCT(this.options[this.selectedIndex].value);"/>
		<option value="" selected="selected">Select type of posting</option>
		<cfoutput query="DispMainMenu">
		<option value="#DispMainMenu.MenuID#" >#DispMainMenu.MainMenuName#</option>
		</cfoutput>
	</select>

Open in new window

0
Comment
Question by:lulu50
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 

Author Comment

by:lulu50
ID: 36892967
Is it something like this?

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

Expert Comment

by:leakim971
ID: 36893005
replace :
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=eval(xmlhttp.responseText);
  var opt = theTarget.options;
  opt.length=0;
  for(var i=0;i<newOpt.length;i++){
    opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
  }
}

Open in new window

by :
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=eval(xmlhttp.responseText);
  var opt = theTarget.options;
  opt.length=0;
  opt[0] = new Option("Select a City","");
  for(var i=0;i<newOpt.length;i++){
    opt[opt.length] = new Option(newOpt[i][1],newOpt[i][0]);
  }
}

Open in new window

0
 

Author Comment

by:lulu50
ID: 36893295
hi leakim971

the
 var opt = theTarget.options;

could be

 <select name="GetCity" style="width: 185px;" size="1" onChange="setChurchOptions(this,'TxtChurch','GetChurch');"/> </select>

and

      <select name="GetChurch"  style="width: 185px;" size="1" >
      <option></option>
      </select>

I have now in my GetChurch select an option "Select city"

the select city should have an option that says "Select City"
and
the select church should have an option that says "Select church"
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 36893577
use :

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=eval(xmlhttp.responseText);
  var opt = theTarget.options;
  opt.length=0;

if(theTarget.name == "GetCityCT") {
  opt[0] = new Option("Select a City","");
}
else {
  opt[0] = new Option("Select a church","");
}

  for(var i=0;i<newOpt.length;i++){
    opt[opt.length] = new Option(newOpt[i][1],newOpt[i][0]);
  }
}

Open in new window

0
 

Author Comment

by:lulu50
ID: 36893839
It works GREAT!!!!!

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=eval(xmlhttp.responseText);
  var opt = theTarget.options;
  opt.length=0;

if(theTarget.name == "GetCityCT") {
  opt[0] = new Option("Select a City","");
}
else if(theTarget.name == "GetCity") {
  opt[0] = new Option("Select a City","");
}
else {
  opt[0] = new Option("Select a church","");
}

  for(var i=0;i<newOpt.length;i++){
    opt[opt.length] = new Option(newOpt[i][1],newOpt[i][0]);
  }
}

Open in new window

0
 

Author Closing Comment

by:lulu50
ID: 36893849
leakim971 Thank you for all your help

A+++++++++++++++++++++++++++++++
0

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question