?
Solved

Pre Selected Combo Box

Posted on 2008-10-24
7
Medium Priority
?
718 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
[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
  • 2
  • 2
  • 2
7 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 22800421
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
ID: 22801194
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.
ID: 22801533
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
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 2

Author Comment

by:bandolex2
ID: 22802758
"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
ID: 22806631
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 1000 total points
ID: 22806638
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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

752 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