Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 292
  • Last Modified:

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

0
lulu50
Asked:
lulu50
  • 10
  • 5
  • 2
1 Solution
 
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
 
sonawanekiranCommented:
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
sonawanekiranCommented:
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
 
sonawanekiranCommented:
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
 
sonawanekiranCommented:

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
 
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
 
sonawanekiranCommented:
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 10
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now