Solved

Pre Selected Combo Box

Posted on 2008-10-24
7
696 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
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…

932 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

16 Experts available now in Live!

Get 1:1 Help Now