Solved

Pre Selected Combo Box

Posted on 2008-10-24
7
692 Views
Last Modified: 2009-12-05
I need show this combo box to the user pre-selected. For example how can i pre-select: "News Sites / ABC News" in this scenario? just adding a SELECTED value into <option SELECTED>News Sites</option> will not change the stage2 combo box to the news sites section...

<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form>
0
Comment
Question by:bandolex2
  • 2
  • 2
  • 2
7 Comments
 
LVL 42

Expert Comment

by:David S.
Comment Utility
Change

group[1][1]=new Option("ABC News","http://www.abcnews.com")

to

group[1][1]=new Option("ABC News","http://www.abcnews.com",true,true);
0
 
LVL 2

Author Comment

by:bandolex2
Comment Utility
Kravimir:

I did it, nothing happens:

<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")

group[1][1]=new Option("ABC News","http://www.abcnews.com",true,true)

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form>

0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
Ah. I misunderstood what you were asking.

Change

<option>News Sites</option>

to

<option selected="selected">News Sites</option>

and change

<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>

to

<option value="http://www.cnn.com">CNN</option>
<option value="http://www.abcnews.com">ABC News</option>


What happens when a user doesn't have JavaScript support enabled in their browser though?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Author Comment

by:bandolex2
Comment Utility
"and change

<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>

to

<option value="http://www.cnn.com">CNN</option>
<option value="http://www.abcnews.com">ABC News</option>"

... this is not an option, because i want the user to have access to the full combobox... i just need that the combobox is pre-selected in that position. I will read user details from a database and this stage is when i give him the oportunity to edit his details...

 if he doenst have javascript support enabled he will never get to this stage
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
1. change the incorrect
onChange="redirect(this.options.selectedIndex)">
to
onChange="redirect(this.selectedIndex)">

2. add
window.onload=function() {
  var theForm = document.doublecombo;
  redirect(theForm.example.selectedIndex);
}
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
Comment Utility
and please change
var temp=document.doublecombo.stage2

 

function redirect(x){

for (m=temp.options.length-1;m>0;m--)

temp.options[m]=null

for (i=0;i<group[x].length;i++){

temp.options[i]=new Option(group[x][i].text,group[x][i].value)

}

temp.options[0].selected=true

}

 

to

 

 

function redirect(x){

  var temp=document.doublecombo.stage2;

  temp.options.length=0;

 

  for (var i=0;i<group[x].length;i++){

    temp.options[i]=new Option(group[x][i].text,group[x][i].value)

  }

  temp.options[0].selected=true

}
 
 

If stage2 gets a "please select"

then use
 

function redirect(x){

  var temp=document.doublecombo.stage2;

  temp.options.length=1;

  for (var i=0;i<group[x].length;i++){

    temp.options[(i+1)]=new Option(group[x][i].text,group[x][i].value)

  }

  temp.options[0].selected=true

}

Open in new window

0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

763 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

10 Experts available now in Live!

Get 1:1 Help Now