Solved

Pre Selected Combo Box

Posted on 2008-10-24
7
701 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
Independent Software Vendors: 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!

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

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.
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…

685 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