?
Solved

Select

Posted on 2011-09-29
17
Medium Priority
?
281 Views
Last Modified: 2012-05-12
Hi,

I have a select that I would like to add to it a default that says "select a state"
but I am not sure how to do it.

<select>
<option value=""> Select a state </option>
</select>
<select name="DispStateBox" style="width: 180px;" size="1"  onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" >
</select>
<cfset strStateList="" >
<cfloop query="DispState">
<cfset strStateList=strStateList&",['#StateID#','#StateName#']" >
</cfloop>
<cfoutput>
<script>
var arrStates=[#Mid(strStateList,2,Len(strStateList))#];
document.forms.FRMAcc.TxtState.onkeyup();
</script>
</cfoutput>

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
  • 10
  • 5
  • 2
17 Comments
 
LVL 10

Expert Comment

by:ienaxxx
ID: 36813812
add an ID attribute to the select tag with value equal to the name, then:
el = document.getElementById("DispStateBox");
op = document.createElement("<option>");
op.value = "";
etich = document.createTextNode("select a state");
op.appendChild(etich);
el.appendChild(op);

Open in new window



HTH
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36813829
Try this

<select name="DispStateBox" style="width: 180px;" size="1"  onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" >
</select>
<cfset strStateList="['select','select state']" >
<cfloop query="DispState">
<cfset strStateList=strStateList&",['#StateID#','#StateName#']" >
</cfloop>
<cfoutput>
<script>
var arrStates=[#Mid(strStateList,2,Len(strStateList))#];
document.forms.FRMAcc.TxtState.onkeyup();
</script>
</cfoutput>

Open in new window

0
 

Author Comment

by:lulu50
ID: 36813830
this is the function
function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  for(var i=0;i<arrStates.length;i++){
    if(arrStates[i][1].match(rxFilter)){
	  opt[opt.length] = new Option(arrStates[i][1],arrStates[i][0]);
	}
  }
}

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 10

Expert Comment

by:ienaxxx
ID: 36813839
or, better:

el = document.getElementById("DispStateBox");
el.options[el.options.length]=new Option("select a state", "", true, true);

HTH
Bye!
0
 

Author Comment

by:lulu50
ID: 36813859
sonawanekiran

I got an error.

___________________

ienaxxx

Please, tell me in what section to put your code I am not an Ajax programmer
0
 

Author Comment

by:lulu50
ID: 36813883
sonawanekiran

your logic make sense but I am not sure why I have an error.
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36813898
Another option


function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  var j = 1;
  opt[0] = new Option('select', 'select state');
  for(var i=0;i<arrStates.length;i++){
    if(arrStates[i][1].match(rxFilter)){
	  opt[j] = new Option(arrStates[i][1],arrStates[i][0]);
           j = j + 1;
	}
  }
}

Open in new window

0
 

Author Comment

by:lulu50
ID: 36814045
sonawanekiran

it works great I can see the select state in my select box but if I select
the "select state" I get error

how can I say something like this?

if the option is not null then populate the city

so, if I select ohio it populate the cities of ohio but if I select "select sate" I get the error.
function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  var j = 1;
  opt[0] = new Option('Select State', '');
  for(var i=0;i<arrStates.length;i++){
    if(arrStates[i][1].match(rxFilter)){
	  opt[j] = new Option(arrStates[i][1],arrStates[i][0]);
           j = j + 1;
	}
  }
}

Open in new window

0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36814061
show me setCityOptions function
0
 

Author Comment

by:lulu50
ID: 36814068

function setCityOptions(theSel,fldNameFilter,fldNameTarget,fldNameTargetChild){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  theForm[fldNameTargetChild].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]);
}

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

Open in new window

0
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 2000 total points
ID: 36814127

Try this below code.
If you are getting error then add 1 line in setCityOptions function to check whether your are getting the value or not

alert(theSel.options[theSel.selectedIndex].value;


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

Open in new window

0
 

Author Comment

by:lulu50
ID: 36814666
sonawanekiran

the value is "select"

the error says:

document.form.txtcity is null
0
 

Author Comment

by:lulu50
ID: 36814679

document.form.txtcity is null  or not an object
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36814694
Try to comment below lines in if block like


// document.form.TxtCity.value='';
  // document.form.TxtChurch.value=''
0
 

Author Comment

by:lulu50
ID: 36814855
sonawanekiran

I don't have any error right now but I do want to clear
the GetCity select box if the user selected "select state"

is it something like this?

document.form.GetCity.option=0;


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

Author Comment

by:lulu50
ID: 36814914

ah  found it!!!!! it works thanks sonawanekiran

var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  theForm[fldNameTargetChild].options.length=0;
0
 

Author Closing Comment

by:lulu50
ID: 36814918
Thank you
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
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 …
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

741 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