Solved

Select

Posted on 2011-09-29
17
266 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
  • 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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 500 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

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.

Join & Write a Comment

Suggested Solutions

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
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…

757 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

19 Experts available now in Live!

Get 1:1 Help Now