Solved

Pre Selected Combo Box

Posted on 2008-10-24
7
698 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.
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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

806 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