Solved

Select box "Select city"

Posted on 2011-09-30
6
309 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 82

Accepted Solution

by:
leakim971 earned 500 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

623 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