I have a number of sites (fledgling that I am) and I want to use one of several double drop down menus I have found, BUT they all have the same problem: the second box MUST be horizontal to the first (side by side). I want the link box to position UNDER the first box. I tried using a <b> or a <p> in a couple of them, but that just makes the contents of the second box disappear when I try to run it. Is there a top over bottom double combo box that only uses javascript (no .js or .css files -- criminy that's so complicated!)?
I have tried several including "Dynamic Select Menus" from javascripts.com, one from Java Script Kit, another from javascriptsource.com, and one that doesn't apparently actually LINK anything from PBerry@CirrusSoftware.com (it's a pretty double menu but it doesn't GO anywhere). My favorite one is the first one if I could get the two select windows to stack, but I'll accept about anything that doesn't require a bunch of extraneous files (.js, .css, all that stuff) that will stack these two select windows vertically on each other.
KJ
awcreations.com
khalidali63
01-13-2003, 03:09 AM
use the <br> tag between any tow drop downs.this will bring the ater right under the first.
if it doesn't work,then please take a look at your code and see where you have missed a right angled bracket ">" or something else like this.
Khalid
sol8air
01-13-2003, 04:21 AM
Thanks, I tried that first. This is exact copy and paste from the site that offered the thing. It works fine horizontally. I just don't want it horizontal. It only displays the selection boxes one beside the other. If I add a <br> or a <p> anywhere, then when I run the code, although it does stack the selection boxes, the content in the second box disappears (it will seem to be there when the page first loads, but as soon as you select anything from the first box, the whole second box vanishes). This is the original version (a version with just one little <br> added follows this one)
======
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>
=========
and this is with just one little <br> added between the first select box and the second:
=======
<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>
<br>
<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()
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>
As soon as you select from the first box, the whole second box disappears!
kj
khalidali63
01-13-2003, 09:27 AM
I do not understand the need for list boxes with the same name and same select boxes,
I have fixed that part.And the code
below when I select an entry from the top drop down,displays the required results in the bottom dd.its the case with both segments of the drop down boxes the one on the top and the bottom.
I hope.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
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>
=========
and this is with just one little <br> added between the first select box and the second:
=======
<form name="doublecombo2">
<p><select name="example2" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<br>
<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>
</form>
<script>
<!--
/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/
var groups=document.doublecombo2.example2.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
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>
</body>
</html>
sol8air
01-13-2003, 02:28 PM
>"I do not understand the need for list boxes with the same name and same select boxes,
I have fixed that part."<
First I don't understand your question about list boxes with same name etc. I gave two versions of the same list box to demonstrate that one works (the side by side version) and one does NOT (upper/lower version). It's not my drop box, it is the creator's sample code.
Secondly: It still does not work, even with the <br> you inserted in the first one (which is then identical to the second one I gave -- as I said, I already tried it). When you make a selection from the first box, the second box DISAPPEARS in actual practice. It looks perfect before you touch it, but make a selection and the second box just vanishes.
If I can't make the little boxes stack and be readable then there's no point in adding my own modifications.
The specific website I would be using these for is a ski travel site wherein I want three separate (will not be on the same page probably) doube drop boxes: One for US Ski sites: first level has level selections (by state), each selection then has 2 to 7 links to specific ski sites in that state.
The second double drop is for Canadian ski sites (again first level by region, second level for specific ski areas). The third double drop is for European ski sites: first level countries, second level actual ski areas, as the other two.
It is pointless to plug in my own URL's and option text until I can get the thing to actually function vertically, or alternately to have another type of two level drop that I can use as long as it is vertical.
So if this style doesn't work, show me another one. As long as I don't have to have stupid .css and .js files (which are never included in anyone's "free" code anyway) scattered all over the internet to make it work. I'm open to suggestions of different styles of vertical drop menu as long as it has two levels and I can code it easily.
For most of my sites, a single drop box has been more than adequate (and I can put a hundred of them on a page if I wanted, that part is too easy!) but this one is such a large site the double drop style best facilitates navigation there.(ya wanna see how bad it works without drop boxes, go see the old version http://skitravelweb.com - it's a mess to navigate!)