[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Single Javascript select box with links

Posted on 2005-05-03
18
Medium Priority
?
470 Views
Last Modified: 2012-06-21
I am looking for a single select box that links to a page when selected (uses variables not option list in select box). It would be in this format -

carModels[0][0] = ["Mustang", "Escort"];
//      carLinks[0][0] = ["mustang.htm", "escort.htm"];


I have code which uses 2 select boxes for Makes/Models?Links but I don't know enough JS to modify the code.

Thanks,
Michael
0
Comment
Question by:mhoggatt1
  • 8
  • 6
  • 3
17 Comments
 
LVL 3

Accepted Solution

by:
farkit earned 1600 total points
ID: 13919788
Would this work for you?

<html>
<head>
     <title>Untitled</title>
</head>
<body>

<select name="test" onchange="document.location=(this.value)">
    <option >Select a Link</option>
<script>  
       var carName = new Array()
carName[0]="Mustang";
carName[1]="Dodge";
carName[2]="Thunderbird";

var carLink = new Array()
carLink[0]="http://www.mustang.com";
carLink[1]="http://www.dodge.com";
carLink[2]="http://www.Thunderbird.com";
 
for (i=0; i<carName.length; i++){

document.write ('<option value=' + carLink[i] + '>' + carName[i] + '</option>');

}</script>
</select>
</body>

Of course, you can save the script in separate file and simply reference it in html.
0
 
LVL 3

Expert Comment

by:farkit
ID: 13919810
oops, didn't realize escorts.com links to a "different"  kind of site.
0
 

Author Comment

by:mhoggatt1
ID: 13920119
Thanks for the reply. I increased the points value for some extra instruction.
1. How do you call the script when it's saved in a different file ?

Also in the scripts I've seen previously the java functions are in the <head> and the select boxes are in the <body>. I will be populating the select box with MySQL. Will there be any security risk by placing the code in the body instead of the heading ? Is wo could you modify the JS for use in the <head> ?

Also this select box will be in the top frame of 3 frames. When the selection is made the result should come up in the left fram. Here is my frameset code -

frameset rows="137,284" cols="*">
  <frame src="top_pane.php">
  <frameset cols="395,395">
    <frame src="left_pane.php">
    <frame src="right_pane.php">
  </frameset>

Thanks,
Michael
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 25

Expert Comment

by:archrajan
ID: 13920432
no points for me:
------------------------

for the result to come in the left frame u shud do this

<select name="test" onchange="window.document.frames['left'].src = this.options[this.selectedIndex].value">

note that u shud name the frame as left
like this

<frame src="left_pane.php" name = "left">
u can also try this syntax:
<select name="test" onchange="window.document.frames['left'].location = this.options[this.selectedIndex].value">

0
 
LVL 25

Expert Comment

by:archrajan
ID: 13920514
http://www.archanapatchirajan.com/frames.html
check there for an example i had done before for a question at EE
0
 
LVL 3

Expert Comment

by:farkit
ID: 13920752
mhoggatt1,  the only thing I'm not sure about is whether you are using php to populate the select menu.  Becuase if you are, you certainly don't need the javascript. The only js you need in that case would be the <select name="test" onchange="......"> line.

In my first post, I assumed you wanted to load data using javascript.  To load javascript from a separate file as in my first post, simply take everything between <script> </script> tags and save them in a file with .js extension. Then simply refeernce as following:

<select name="test" onchange="parent.leftFrame.location=(this.value)">  <!-- archrajan's onchange code will work fine here as well -->
    <option >Select a Link</option>
    <script language="JavaScript" src="list.js"></script>      /* This line will load javacript file with your data */
</select>

/****************list.js********************/

      var carName = new Array()
carName[0]="Mustang";
carName[1]="Escort";
carName[2]="Thunderbird";

var carLink = new Array()
carLink[0]="http://www.mustang.com";
carLink[1]="http://www.ford.com";
carLink[2]="http://www.Thunderbird.com";
 
for (i=0; i<carName.length; i++){

document.write ('<option value=' + carLink[i] + '>' + carName[i] + '</option>');
}
/****************************************/


I'm not javascript expert by any stretch of imagination, but loading this file in the frame body harmless, unless your list is extraordinarily huge.
0
 

Author Comment

by:mhoggatt1
ID: 13921215
Yes I need JS so when the selection is made the frames will work. I'm getting somewhat confused. Couls you place the JS code into the <head>as a 'function' with the select in the <body> ? I'll be able to see how it works better this way.

I received this code from EE on a 2 select box setup. The code I would prefer would be like this only using one select box with links. It is setup with 2 horizontal frames.
Thanks,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>left_pane.htm</title>
<script language="JavaScript">
var carMakes = new Array();
var carModels = new Array();
var carLinks = new Array();


carMakes[0] = "Ford";
carMakes[1] = "Honda";
carModels[0] = ["Mustang", "Escort", "Fiesta"];     // an array within an array
carModels[1] = ["Accord", "NSX", "Civic", "CRX"];
carLinks[0] = ["mustang.htm", "escort.htm", "fiesta.htm"];
carLinks[1] = ["accord.htm", "nsx.htm", "civic.htm", "crx.htm"];

// This is called when the page loads to set the initial car makes.
function populateMakes() {
     var makeSel = document.getElementById("make");
     makeSel.length = 0;
     for(var i=0; i<carMakes.length; i++) {
          makeSel.options[i] = new Option(carMakes[i], carMakes[i]);
     }
      setLink();
}

// This is called when the page loads to set the initial models. This is called
// each time the selected make is changed in order to load a list of models into
// the relevant select object.
function doChangeOptions() {
     var modelSel = document.getElementById("model");
     modelSel.length = 0;     // clear any existing options
     var sel = document.getElementById("make").selectedIndex;     // get selected make
     var currArr = carModels[sel];     // this will be an array
     for(var i=0; i<currArr.length; i++) {
          modelSel.options[i] = new Option(currArr[i], currArr[i]);
     }
}

// This method updates the link to the selected model of car
function setLink() {
     var makeSel = document.getElementById("make");
     var modelSel = document.getElementById("model");
     var make = makeSel.selectedIndex;
     var linkArr = carLinks[make];     // get the links for this make
     document.getElementById("car_link").href = linkArr[modelSel.selectedIndex];
     document.getElementById("car_link").innerHTML = modelSel.value;
     parent.frames[1].location.href = linkArr[modelSel.selectedIndex];   // this is the additional line that changes the source of the second frame
}
</script>
</head>
<body onload="populateMakes();doChangeOptions();setLink()">
<p>Choose a make:
     <select id="make" onchange="doChangeOptions();setLink()">
     </select>
</p>
<p>Choose a model:
     <select id="model" onchange="setLink()">

     </select>
</p>
<p>Link to selected car: <a href="#" id="car_link">No model selected</a></p>
</body>
</html>


0
 
LVL 25

Expert Comment

by:archrajan
ID: 13921261
Michel
just replace this line
 parent.frames[1].location.href = linkArr[modelSel.selectedIndex];  
with

window.frames['left'].location.href = linkArr[modelSel.selectedIndex];  

where left is the name of ur left frame like <frame name = "left">
just this wud make it work!
0
 

Author Comment

by:mhoggatt1
ID: 13921993
Let's back up for a minute. I changed the frameset in Dreamweaver so I could understand it better.

<frameset rows="80,*" cols="*" frameborder="YES" border="0" framespacing="0">
  <frame src="farkit.php" name="topFrame" scrolling="YES" noresize>
  <frameset cols="*,80" frameborder="YES" border="0" framespacing="0">
    <frame src="Untitled-1.htm" name="mainFrame">
    <frame src="UntitledFrame-5.htm" name="rightFrame" scrolling="YES" noresize>
  </frameset>
</frameset>
<noframes>

Here is farkit's code. I executed the code, but it's not changing frames. Let's get this working, then I'll close this question and reissue a new one for the last part of my question.
Thanks,

<frameset rows="80,*" cols="*" frameborder="YES" border="0" framespacing="0">
  <frame src="farkit.php" name="topFrame" scrolling="YES" noresize>
  <frameset cols="*,80" frameborder="YES" border="0" framespacing="0">
    <frame src="Untitled-1.htm" name="mainFrame">
    <frame src="UntitledFrame-5.htm" name="rightFrame" scrolling="YES" noresize>
  </frameset>
</frameset>
<noframes>
0
 

Author Comment

by:mhoggatt1
ID: 13922017
Here's farkit's code -

<html>
<head>
     <title>Untitled</title>
</head>
<body>

<select name="test" onchange="window.document.frames['mainFrame'].src = this.options[this.selectedIndex].value">
<script>  
      var carName = new Array()
carName[0]="Mustang";
carName[1]="Escort";
carName[2]="Torino";

var carLink = new Array()
carLink[0]="mustang.htm";
carLink[1]="escort.htm";
carLink[2]="torino.htm";
 
for (i=0; i<carName.length; i++){

document.write ('<option value=' + carLink[i] + '>' + carName[i] + '</option>');

}</script>
</select>
</body>
</html>

Sorry for the mixup !
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13922537
ok... post the view souce now from ur main page
0
 

Author Comment

by:mhoggatt1
ID: 13922992
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bible Study Database</title>
</head>

<frameset rows="80,*" cols="*" frameborder="YES" border="0" framespacing="0">
  <frame src="farkit.php" name="topFrame" scrolling="YES" noresize>
  <frameset cols="*,80" frameborder="YES" border="0" framespacing="0">
    <frame src="Untitled-1.htm" name="mainFrame">
    <frame src="UntitledFrame-5.htm" name="rightFrame" scrolling="YES" noresize>
  </frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13923283
ok now farkit.php is the one u posted previously right???
0
 

Author Comment

by:mhoggatt1
ID: 13926335
Hi archrajan,
   Here is farkit.php. If you will provide code that is similar to the 2 dropdown Makes/Models/Links as above I will give farkit these points. Then since this is the same question I asked in this question (Q_21408438.html) if you'll post the code to that question I'll give you the 500 points for your work.
Thanks

<html>
<head>
     <title>Untitled</title>
</head>
<body>

<select name="test" onchange="window.document.frames['mainFrame'].src = this.options[this.selectedIndex].value">
<script>  
      var carName = new Array()
carName[0]="Mustang";
carName[1]="Escort";
carName[2]="Torino";

var carLink = new Array()
carLink[0]="mustang.htm";
carLink[1]="escort.htm";
carLink[2]="torino.htm";
 
for (i=0; i<carName.length; i++){

document.write ('<option value=' + carLink[i] + '>' + carName[i] + '</option>');

}</script>
</select>
</body>
</html>
0
 

Author Comment

by:mhoggatt1
ID: 13926362
P.S. By sinilar to the 2 dropdown menu I mean I need only one dropdown/link menu, but with the JS in the <head> and the select box in the <body> like the example I gave above.
Thanks,
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13926451
Yeah i wud answer in ur other questioon
0
 

Author Comment

by:mhoggatt1
ID: 13927528
Great, I'll close this one. Let me know when it's ready.
Thanks guys,
Michael
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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

829 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