Select

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

lulu50Asked:
Who is Participating?
 
Kiran SonawaneConnect With a Mentor Project LeadCommented:

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
 
ienaxxxCommented:
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
 
Kiran SonawaneProject LeadCommented:
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
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
lulu50Author Commented:
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
 
ienaxxxCommented:
or, better:

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

HTH
Bye!
0
 
lulu50Author Commented:
sonawanekiran

I got an error.

___________________

ienaxxx

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

your logic make sense but I am not sure why I have an error.
0
 
Kiran SonawaneProject LeadCommented:
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
 
lulu50Author Commented:
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
 
Kiran SonawaneProject LeadCommented:
show me setCityOptions function
0
 
lulu50Author Commented:

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

the value is "select"

the error says:

document.form.txtcity is null
0
 
lulu50Author Commented:

document.form.txtcity is null  or not an object
0
 
Kiran SonawaneProject LeadCommented:
Try to comment below lines in if block like


// document.form.TxtCity.value='';
  // document.form.TxtChurch.value=''
0
 
lulu50Author Commented:
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
 
lulu50Author Commented:

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

var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  theForm[fldNameTargetChild].options.length=0;
0
 
lulu50Author Commented:
Thank you
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.

All Courses

From novice to tech pro — start learning today.