Solved

Select box "Select city"

Posted on 2011-09-30
6
298 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
  • 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now